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

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

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