cato447/EIST-Teamprojekt
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

[WIP]: Adding style to frontend

Browse Source 
- overflow working
- better aesthetics
- working responsive container layout
- sticky input field for scrolling purposes
This commit is contained in:
Luis S. Ruisinger
2022-06-18 18:34:01 +02:00
parent 5f913bdffa
commit a60f365d90
2 changed files with 98 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
frontend/src/components/ItemModel.vue
View File

@@ -1,4 +1,5 @@
<template> <template>
<body>
<div class="main"> <div class="main">
<h1 class="email">{{ userEmail }}</h1> <h1 class="email">{{ userEmail }}</h1>
<section class="itemapp"> <section class="itemapp">
@@ -55,7 +56,10 @@
class="item" class="item"
:key="item.id"> :key="item.id">
<div class="view"> <div class="view">
<label @dblclick="editItem(item)">{{ item.name.toUpperCase() }} {{ item.quantity }}{{ item.unit.toLowerCase() }}</label> <label class="item-name" @dblclick="editItem(item)">
<span class="item-name-fame">{{ item.name.toUpperCase() }} </span>
<span class="item-information-frame">{{ item.quantity }} {{ item.unit.toLowerCase() }}</span>
</label>
<button class="destroy" @click="removeItem(item)"></button> <button class="destroy" @click="removeItem(item)"></button>
</div> </div>
</li> </li>
@@ -65,7 +69,7 @@
</section> </section>
</div> </div>
</body>
</template> </template>
<script> <script>
@@ -184,7 +188,14 @@ export default Items
padding: 0; padding: 0;
} }
body{
margin: 0;
padding: 0;
background-color:darkcyan;
}
.main { .main {
position: relative;
font-family: 'Montserrat', sans-serif; font-family: 'Montserrat', sans-serif;
height: 100vh; height: 100vh;
display: grid; display: grid;
@@ -197,8 +208,10 @@ export default Items
/* input field styling */ /* input field styling */
.inputField-header { .inputField-header {
position: relative; position: fixed;
width: 20vh; width: 20vh;
left: 50%;
transform: translateX(-50%);
} }
.newItemName { .newItemName {
@@ -267,35 +280,65 @@ export default Items
/* item section */ /* item section */
.item-section{ .item-section{
position: fixed; position: absolute;
font-size: 1vh; font-size: 20px;
top: 80%;
left: 50%;
margin-left: 50px;
} }
.item-list{ .item-list{
align-self: center;
position: relative; position: relative;
display: grid; display: grid;
grid-gap: 12vh;
top: -60vh; top: -60vh;
left: -44.33vw; left: -44.33vw;
margin-left: 10vh; row-gap: 75px;
grid-template-columns: repeat(12, 2vh); column-gap: 340px;
.item{ .item{
text-align: center;
position: relative; position: relative;
margin-top: 0; margin-top: 0;
font-family: Montserrat, sans-serif; font-family: Montserrat, sans-serif;
list-style: none; list-style: none;
border: 0 solid white; padding: 100px;
border-radius: 0; width: 300px;
padding: 5vh;
background: darkslategrey; background: darkslategrey;
box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.4); box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.6);
display: flex; display: flex;
} }
.item-name{
position: relative;
left: -20px;
}
.item-name-fame{
letter-spacing: 4px;
font-size: 30px;
}
.item-name-fame:after{
content:'';
display:block;
border-bottom:2px solid #000;
top: 16px;
height:0;
width:250px;
position:relative;
}
.item-information-frame{
letter-spacing: 2px;
position: relative;
top: 32px;
}
.view{ .view{
position: relative; position: relative;
top: -3vh; top: -60px;
left: -2.5vh; left: -2.5vh;
color: white; color: white;
} }
@@ -303,23 +346,23 @@ export default Items
.destroy{ .destroy{
display: block; display: block;
position: relative; position: relative;
height: 0.1vh; height: 50px;
width: 3vh; width: 2px;
top: 6vh; top: 140px;
left: 1vh; left: 0;
border-radius: 0.1vh; border-radius: 1px;
border: solid black 0.1vh; border: solid black 1px;
transform: rotate(45deg); transform: rotate(45deg);
} }
.destroy:after{ .destroy:after{
content: ''; content: '';
border-radius: 0.1vh; height: 50px;
border: solid black 0.1vh; width: 2px;
position: absolute; border-radius: 1px;
width: 3vh; border: solid black 1px;
top: -0.05vh; position: fixed;
left: -0.1vh; top: -2px;
transform: rotate(-90deg); transform: rotate(-90deg);
} }
@@ -328,4 +371,33 @@ export default Items
} }
} }
@media (max-width: 1920px) {
.item-list{
grid-template-columns: repeat(4, 2vh);
}
}
@media (min-width: 1920px) {
.item-list{
grid-template-columns: repeat(5, 2vh);
}
}
@media (min-width: 2560px) {
.item-list{
grid-template-columns: repeat(7, 2vh);
}
}
@media (min-width: 3840px) {
.item-list{
grid-template-columns: repeat(9, 2vh);
border-collapse: separate;
border-spacing: 0 15px;
}
}
</style> </style>

2
frontend/src/styling/navbar.scss
View File

@@ -38,7 +38,7 @@
flex-grow: 1; flex-grow: 1;
border-bottom: 0.1vh solid black; border-bottom: 0.1vh solid black;
margin: 5px; margin: 5px;
z-index: 0;
} }
.menu-icon { .menu-icon {