sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-31 09:37:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

[HIMA-10] - font size adjustments

Browse Source
This commit is contained in:
Peter Skrlj
2019-02-09 16:54:57 +01:00
parent 33efc9fc24
commit 81b1ee5dc7
5 changed files with 84 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/app/components/menu/menu.component.scss
View File

@@ -1,36 +1,39 @@
@import "../../../assets/scss/variables";
@import '../../../assets/scss/variables';
.menu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: white;
z-index: 100;
position: fixed;
bottom: 0;
width: 100%;
height: 80px;
background-color: white;
z-index: 100;
box-shadow: 0px -2px 6px 0px #dde5ec;
}
.menu-grid {
display: grid;
grid-template-columns: auto auto auto auto auto;
padding-top: 10px;
display: grid;
grid-template-columns: auto auto auto auto auto;
padding-top: 20px;
}
.menu-item-grid {
display: grid;
grid-template-columns: auto;
outline: none;
display: grid;
grid-template-columns: auto;
outline: none;
}
.menu-item {
font-size: 10pt;
font-weight: bold;
color: $color-inactive;
font-size: 15px;
line-height: 21px;
font-weight: 600;
color: $color-inactive;
}
.selected {
color: $color-active;
color: $color-active;
}
.menu-icon {
width: 20px;
}
width: 34px;
height: 24px;
}

2
src/app/components/process-header/process-header.component.html
View File

@@ -20,7 +20,7 @@
</div>
<div class="add-process">
<a (click)="addProcess()"
><img class="process-icon" src="/assets/images/add-process.png"
><img class="process-icon" src="/assets/images/add-red.svg"
/></a>
</div>
</div>

32
src/app/components/process-tab/process-tab.component.html
View File

@@ -1,28 +1,32 @@
<div class="grid-item" id="{{process.id}}">
<div class="grid-container" [ngClass]="{'selected-process': process.selected}">
<div class="grid-item" id="{{ process.id }}">
<div
class="grid-container"
[ngClass]="{ 'selected-process': process.selected }"
>
<div (click)="selectProcess(process)">
<img class="process-leading-icon" src="/assets/images/{{process.icon}}.png">
<img
class="process-leading-icon"
src="/assets/images/{{ process.icon }}.png"
/>
</div>
<div class="pt-3" (click)="selectProcess(process)">
<span class="process-name">{{ process.name }}</span>
</div>
<ng-container *ngIf="process.cart">
<div (click)="openCart()">
<img class="process-cart-icon" src="../../../assets/images/Shopping_Cart.svg">
</div>
<div class="pt-3">
<span class="process-cart-number">{{ cartCount }}</span>
</div>
</ng-container>
<ng-container *ngIf="!process.cart">
<div (click)="openCart()">
<img
class="process-cart-icon"
src="../../../assets/images/Shopping_Cart.svg"
/>
</div>
<div class="pt-3">
<span class="">&nbsp;</span>
<span class="process-cart-number">{{ cartCount }}</span>
</div>
</ng-container>
<div>
<a (click)="deleteProcess(process)">
<img class="process-delete-icon" src="/assets/images/close.svg">
<img class="process-delete-icon" src="/assets/images/close.svg" />
</a>
</div>
</div>
</div>
</div>

54
src/app/components/process-tab/process-tab.component.scss
View File

@@ -1,54 +1,58 @@
@import "../../../assets/scss/variables";
@import '../../../assets/scss/variables';
.process-tab {
border-bottom: 2px solid black;
border-bottom: 2px solid black;
}
.grid-container {
display: grid;
grid-template-columns: min-content max-content max-content max-content min-content;
grid-column-gap: 1vh;
height: 36px;
padding-top: 2px;
display: flex;
flex-direction: row;
height: 36px;
padding-top: 2px;
& > * {
margin-left: 3px;
margin-right: 3px;
}
}
.process-delete-icon {
width: 14px;
margin-top: 6px;
width: 14px;
margin-left: 5px;
margin-top: 6px;
}
.process-cart-icon {
margin-top: 6px;
width: 19px;
margin-top: 6px;
width: 19px;
}
.process-leading-icon {
width: 25px;
width: 25px;
}
.grid-item {
display: inline-block;
padding-right: 20px;
display: inline-block;
padding-right: 20px;
}
.selected-process {
border-bottom: 3px solid $hima-color-red;
border-bottom: 3px solid $hima-color-red;
}
.not-selected-process {
border-bottom: 3px solid white;
border-bottom: 3px solid white;
}
.process-name {
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
}
.process-cart-number {
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
}
font-size: 15px;
font-weight: bold;
color: $color-active;
margin-top: 5px;
}

50
src/assets/images/add-red.svg
View File

@@ -1,36 +1,14 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 459.739 459.739" style="enable-background:new 0 0 459.739 459.739;" xml:space="preserve" width="512px" height="512px">
<path d="M229.869,0C102.917,0,0,102.917,0,229.87c0,126.952,102.917,229.869,229.869,229.869s229.87-102.918,229.87-229.869 C459.739,102.917,356.821,0,229.869,0z M313.677,260.519h-53.158v53.158c0,16.925-13.724,30.649-30.649,30.649 c-16.926,0-30.649-13.724-30.649-30.649v-53.158h-53.156c-16.926,0-30.65-13.723-30.65-30.649c0-16.927,13.724-30.65,30.65-30.65 h53.156v-53.156c0-16.927,13.724-30.65,30.649-30.65c16.926,0,30.649,13.724,30.649,30.65v53.156h53.158 c16.924,0,30.648,13.723,30.648,30.65C344.325,246.796,330.601,260.519,313.677,260.519z" fill="#ea0000"/>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="34px" height="34px" viewBox="0 0 34 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 52.2 (67145) - http://www.bohemiancoding.com/sketch -->
<title>Vorgang</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="UC1_19_Hugendubel_Instoreapp_Kunden_Warenkorb_1" transform="translate(-719.000000, -100.000000)">
<g id="+Vorgang" transform="translate(719.000000, 100.000000)">
<circle id="Oval" fill="#F70400" cx="17" cy="17" r="17"></circle>
<path d="M17,9.53333333 C16.5581867,9.53333333 16.2,9.89150667 16.2,10.3333333 L16.2,15.66668 L10.8666667,15.66668 C10.4248267,15.66668 10.0666667,16.0248373 10.0666667,16.4666773 C10.0666667,16.9084907 10.4248267,17.2666773 10.8666667,17.2666773 L16.2,17.2666773 L16.2,22.6000107 C16.2,23.041824 16.5581867,23.4000107 17,23.4000107 C17.44184,23.4000107 17.8,23.041824 17.8,22.6000107 L17.8,17.2666773 L23.1333333,17.2666773 C23.5751467,17.2666773 23.9333333,16.9084907 23.9333333,16.4666773 C23.9333333,16.0248373 23.5751467,15.66668 23.1333333,15.66668 L17.8,15.66668 L17.8,10.3333333 C17.8,9.89150667 17.44184,9.53333333 17,9.53333333 Z" id="Plus" stroke="#FFFFFF" stroke-width="0.7" fill="#FFFFFF" transform="translate(17.000000, 16.466672) rotate(-360.000000) translate(-17.000000, -16.466672) "></path>
</g>
</g>
</g>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.5 KiB