torjus/apiary
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make navbar better on small devices

Browse Source
This commit is contained in:
Torjus Håkestad 2021-04-10 23:53:39 +02:00
parent 53f5418275
commit 5fc51b6843
2 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
web/frontend/src/App.vue
View File

@ -1,7 +1,7 @@
<template>
<div id="app">
<div id="apiary-navbar">
<b-navbar type="dark" variant="dark">
<b-navbar toggleable="md" type="dark" variant="dark">
<b-navbar-brand href="#">
<img
alt="logo"
@ -12,14 +12,19 @@
/>
apiary.t-juice.club
</b-navbar-brand>
<b-navbar-nav>
<b-nav-item :to="'/'">Home</b-nav-item>
<b-nav-item :to="'/stats'">Stats</b-nav-item>
<b-nav-item :to="'/attempts'">Attempts</b-nav-item>
</b-navbar-nav>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav class="mr-auto">
<b-nav-item :to="'/'">Home</b-nav-item>
<b-nav-item :to="'/stats'">Stats</b-nav-item>
<b-nav-item :to="'/attempts'">Attempts</b-nav-item>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
<router-view></router-view>
<b-container id="main-content-container" fluid="md">
<router-view></router-view>
</b-container>
</div>
</template>
@ -47,7 +52,6 @@ $font-stack: 'Secular One';
color: #2c3e50;
margin-top: 0;
}
.navbar-brand {
font-family: 'Secular One', sans-serif;
}

8
web/frontend/src/components/AttemptList.vue
View File

@ -2,7 +2,13 @@
<div class="attemptlist">
<h1>Attempt list</h1>
<p>
<b-table striped hover :items="attempts" :fields="fields"></b-table>
<b-table
responsive="md"
striped
hover
:items="attempts"
:fields="fields"
></b-table>
</p>
</div>
</template>