Browse Source

redesign; menu on left;

modals-to-spa
stingl 4 years ago
parent
commit
faa24e8791
  1. 43
      css/app.css
  2. 52
      index.html

43
css/app.css

@ -21,38 +21,13 @@ body { @@ -21,38 +21,13 @@ body {
}
.side-button-right {
/*position: fixed;*/
/*right: 30px;*/
/*height: 60px;*/
/*width: 60px;*/
font-size: 1.7em;
}
.add-tracker-button {
/*position: fixed;*/
/*left: 30px;*/
/*bottom: 30px;*/
/*height: 60px;*/
/*width: 60px;*/
font-size: 1.7em;
}
.first-button {
/*bottom: 30px;*/
}
.second-button {
/*bottom: 110px;*/
}
.third-button {
/*bottom: 190px;*/
}
.navbar-brand {
width: 100%;
}
@ -125,19 +100,27 @@ nav, .card { @@ -125,19 +100,27 @@ nav, .card {
margin-left: 5%;
}
#bottom-menu {
#left-menu {
position: fixed;
bottom: 0;
width: 100%;
top: 0;
left: 0;
height: 100%;
width: 90px;
align-content: center;
background-color: #bdbdbd;
height: 90px;
border-top: 1px solid grey;
border-right: 1px solid grey;
padding: 0;
}
#content {
margin-left: 90px;
max-width: 85vw;
}
.bottom-menu-item {
width: 100%;
margin-bottom: 1em;
}
.btn-switcher {

52
index.html

@ -15,26 +15,27 @@ @@ -15,26 +15,27 @@
<body>
<div id="root">
<div class="container">
<!-- Tracker-Display -->
<div class="container" id="content">
<link rel="stylesheet" :href="'https://bootswatch.com/5/' + theme + '/bootstrap.min.css'">
<link rel="stylesheet" href="css/app.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand">
<img :src="dashboardLogo" alt="logo" class="logo-nav float-end" v-if="dashboardLogo"/>
<div v-if="experimental.trackWorktime">
<template v-if="worktimeTracker.tracking">
<i class="far fa-pause-circle"></i>
<i class="far fa-stop-circle" @click="stopTracking(worktimeTracker)"></i>
</template>
<template v-else>
<a href="javascript:" @click="startTracking(worktimeTracker)">
<i class="far fa-play-circle"></i>
</a>
</template>
</div>
<h5 class="brand-title">Timetrack</h5>
</a>
</nav>
<!-- <nav class="navbar navbar-expand-lg navbar-light bg-light">-->
<!-- <a class="navbar-brand">-->
<!-- <img :src="dashboardLogo" alt="logo" class="logo-nav float-end" v-if="dashboardLogo"/>-->
<!-- <div v-if="experimental.trackWorktime">-->
<!-- <template v-if="worktimeTracker.tracking">-->
<!-- <i class="far fa-pause-circle"></i>-->
<!-- <i class="far fa-stop-circle" @click="stopTracking(worktimeTracker)"></i>-->
<!-- </template>-->
<!-- <template v-else>-->
<!-- <a href="javascript:" @click="startTracking(worktimeTracker)">-->
<!-- <i class="far fa-play-circle"></i>-->
<!-- </a>-->
<!-- </template>-->
<!-- </div>-->
<!-- <h5 class="brand-title">Timetrack</h5>-->
<!-- </a>-->
<!-- </nav>-->
<div class="row" v-if="!experimental.boardView || view === 'trackers'">
<div class="col-md-12">
<div class="row">
@ -762,7 +763,8 @@ @@ -762,7 +763,8 @@
</div>
</div>
<div id="bottom-menu">
<!-- Menu section -->
<div id="left-menu">
<div class="container">
<div class="row">
<div class="col">
@ -776,7 +778,7 @@ @@ -776,7 +778,7 @@
</ul>
</div>
</div>
<div class="col" v-if="tickets.length > 0">
<div class="" v-if="tickets.length > 0">
<a type="button"
class="btn btn-primary text-light bottom-menu-item"
data-bs-toggle="modal"
@ -786,7 +788,7 @@ @@ -786,7 +788,7 @@
<i class="fas fa-clock"></i>
</a>
</div>
<div class="col" v-if="archive.length > 0">
<div class="" v-if="archive.length > 0">
<a type="button"
class="btn btn-secondary text-dark bottom-menu-item"
data-bs-toggle="modal"
@ -796,7 +798,7 @@ @@ -796,7 +798,7 @@
<i class="fas fa-archive"></i>
</a>
</div>
<div class="col" v-if="experimental.portalSwitcher">
<div class="" v-if="experimental.portalSwitcher">
<a type="button"
class="btn btn-warning text-light bottom-menu-item"
data-bs-toggle="modal"
@ -806,7 +808,7 @@ @@ -806,7 +808,7 @@
<i class="fas fa-random"></i>
</a>
</div>
<div class="col" v-if="experimental.snippetSpace">
<div class="" v-if="experimental.snippetSpace">
<a type="button"
class="btn btn-info text-light bottom-menu-item"
data-bs-toggle="modal"
@ -816,7 +818,7 @@ @@ -816,7 +818,7 @@
<i class="fas fa-code"></i>
</a>
</div>
<div class="col">
<div class="">
<a type="button"
class="btn btn-info text-light bottom-menu-item"
data-bs-toggle="modal"
@ -826,7 +828,7 @@ @@ -826,7 +828,7 @@
<i class="fas fa-history"></i>
</a>
</div>
<div class="col">
<div class="">
<a type="button"
class="btn btn-dark text-light bottom-menu-item"
data-bs-toggle="modal"