sxhundred/ISA-Frontend
1
0
Fork 0
mirror of https://dev.azure.com/hugendubel/ISA/_git/ISA-Frontend synced 2025-12-28 22:42:11 +01:00
Code Issues Packages Projects Releases Wiki Activity

Added menu component, used for navigation on application

Browse Source
This commit is contained in:
Eraldo Hasanaj
2019-01-18 15:48:46 +01:00
parent 9a58c6eb7c
commit 63513e5967
22 changed files with 433 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/app.component.html
View File

@@ -1,3 +1,4 @@
<app-header></app-header>
<app-content></app-content>
<app-menu></app-menu>
<router-outlet></router-outlet>

4
src/app/app.module.ts
View File

@@ -4,10 +4,12 @@ import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LayoutsModule } from './modules/layouts/layouts.module';
import { MenuComponent } from './layouts/menu/menu.component';
@NgModule({
declarations: [
AppComponent
AppComponent,
MenuComponent
],
imports: [
BrowserModule,

2
src/app/layouts/content/content.component.scss
View File

@@ -2,5 +2,5 @@
.content-body {
height:100%;
background-color: $color-inactive;
background-color: $hima-content-color;
}

52
src/app/layouts/header/header.component.html
View File

@@ -1,29 +1,31 @@
<div class="three-col-grid-container mx-8">
<div class="align-left">
<img src="/assets/images/hugendubel.jpg">
</div>
<div class="align-center">
<div class="two-col-grid-container pt-5">
<div class="align-right">
<img class="header-icon" src="/assets/images/newspaper_active.svg">
<div class="app-header">
<div class="three-col-grid-container mx-8">
<div class="align-left">
<img src="/assets/images/hugendubel.jpg">
</div>
<div class="align-center">
<div class="two-col-grid-container pt-5">
<div class="align-right">
<img class="header-icon" src="/assets/images/newspaper_active.svg">
</div>
<div class="align-left">
<img class="header-icon" src="/assets/images/notification_inactive.svg">
</div>
</div>
<div class="align-left">
<img class="header-icon" src="/assets/images/notification_inactive.svg">
</div>
<div class="align-right">
<div class="three-col-grid-container-fixed pt-5">
<div class="align-right">
<img class="header-icon profile-icon" src="/assets/images/avatar_active.svg">
</div>
<div class="align-right pt-3">
<span class="profile-name">{{customer}}</span>
</div>
<div class="align-right pt-3">
<img class="header-icon" src="/assets/images/more_inactive.svg">
</div>
</div>
</div>
</div>
<div class="align-right">
<div class="three-col-grid-container-fixed pt-5">
<div class="align-right">
<img class="header-icon profile-icon" src="/assets/images/avatar_active.svg">
</div>
<div class="align-right pt-3">
<span class="profile-name">{{customer}}</span>
</div>
<div class="align-right pt-3">
<img class="header-icon" src="/assets/images/more_inactive.svg">
</div>
</div>
</div>
</div>
<app-process-header></app-process-header>
<app-process-header></app-process-header>
</div>

7
src/app/layouts/header/header.component.scss
View File

@@ -1,5 +1,12 @@
@import "../../../assets/scss/variables";
.app-header {
position: fixed;
top: 0;
width: 100%;
background-color: white;
}
.three-col-grid-container {
display: grid;
grid-template-columns: auto auto auto;

34
src/app/layouts/menu/menu.component.html Normal file
View File

@@ -0,0 +1,34 @@
<div class="menu">
<div class="menu-grid">
<div class="menu-item-grid align-center">
<div>
<img class="menu-icon" src="/assets/images/search_book_active.svg">
</div>
<span class="menu-item selected">Artikelsuche</span>
</div>
<div class="menu-item-grid align-center">
<div>
<img class="menu-icon" src="/assets/images/avatar_inactive.svg">
</div>
<span class="menu-item">Kundensuche</span>
</div>
<div class="menu-item-grid align-center">
<div>
<img class="menu-icon" src="/assets/images/box_inactive.svg">
</div>
<span class="menu-item">Abholfach</span>
</div>
<div class="menu-item-grid align-center">
<div>
<img class="menu-icon" src="/assets/images/return_box_inactive.svg">
</div>
<span class="menu-item">Retoure</span>
</div>
<div class="menu-item-grid align-center">
<div>
<img class="menu-icon" src="/assets/images/radar_inactive.svg">
</div>
<span class="menu-item">Drag & Drop</span>
</div>
</div>
</div>

34
src/app/layouts/menu/menu.component.scss Normal file
View File

@@ -0,0 +1,34 @@
@import "../../../assets/scss/variables";
.menu {
position: fixed;
bottom: 0;
width: 100%;
height: 60px;
background-color: white;
}
.menu-grid {
display: grid;
grid-template-columns: auto auto auto auto auto;
padding-top: 10px;
}
.menu-item-grid {
display: grid;
grid-template-columns: auto;
}
.menu-item {
font-size: 10pt;
font-weight: bold;
color: $color-inactive;
}
.selected {
color: $color-active;
}
.menu-icon {
width: 20px;
}

25
src/app/layouts/menu/menu.component.spec.ts Normal file
View File

@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MenuComponent } from './menu.component';
describe('MenuComponent', () => {
let component: MenuComponent;
let fixture: ComponentFixture<MenuComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MenuComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MenuComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

15
src/app/layouts/menu/menu.component.ts Normal file
View File

@@ -0,0 +1,15 @@
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-menu',
templateUrl: './menu.component.html',
styleUrls: ['./menu.component.scss']
})
export class MenuComponent implements OnInit {
constructor() { }
ngOnInit() {
}
}

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

@@ -1,6 +1,6 @@
<div class="grid-container pt-5 mx-8">
<div class="align-left pt-3">
<div class="process-grid-container">
<div class="process-grid-container ml-5">
<app-process-tab *ngFor="let process of processes" [process]="process" [processes]="processes"></app-process-tab>
</div>
</div>

5
src/app/layouts/process-header/process-header.component.scss
View File

@@ -3,18 +3,19 @@
.grid-container {
display: grid;
grid-template-columns: 70.5% auto;
grid-column-gap: 2vh;
grid-column-gap: 1vh;
}
.grid-container-fix-width-last-col {
display: grid;
grid-template-columns: max-content auto;
grid-template-columns: auto max-content;
grid-column-gap: 1vh;
}
.process-span {
color: $hima-color-red;
font-weight: bold;
margin-right: 9px;
}
.process-icon {

6
src/app/layouts/process-tab/process-tab.component.ts
View File

@@ -14,11 +14,11 @@ export class ProcessTabComponent implements OnInit {
@Input() processes: Array<Process>;
deleteProcess(process: Process) {
// if process to be deleted is selected set first process as selected
if (process.selected === true && this.processes.length > 1) {
this.processes.splice(this.processes.indexOf(process), 1);
// if deleted process is selected set first process as selected
if (process.selected === true && this.processes.length > 0) {
this.processes[0].selected = true;
}
this.processes.splice(this.processes.indexOf(process), 1);
}
selectProcess(process: Process): void {

44
src/assets/images/box_active.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M476.919,141.304l-0.379-0.655c-0.525-1.089-1.131-2.132-1.807-3.124L403.505,14.381C398.374,5.511,388.822,0,378.574,0 H133.437c-10.265,0-19.825,5.524-24.952,14.417l-72.39,125.586c-0.652,1.132-1.122,2.316-1.454,3.519 c-1.019,2.751-1.579,5.724-1.579,8.826v324.365c0,19.456,15.829,35.285,35.285,35.285h375.304 c19.456,0,35.285-15.829,35.285-35.285V151.159c0-0.435-0.013-0.867-0.036-1.297C479.104,146.975,478.478,143.998,476.919,141.304 z M271.518,30.011h106.358l56.032,96.873h-162.39V30.011z M134.136,30.011h107.371v96.873H78.296L134.136,30.011z M448.925,476.714c0,2.908-2.366,5.274-5.274,5.274H68.347c-2.908,0-5.274-2.366-5.274-5.274V156.895h385.852V476.714z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M309.863,271.355l-40.021-52.183c-2.65-3.455-6.509-5.421-10.527-5.794c-0.018-0.002-0.037-0.003-0.055-0.005 c-0.406-0.036-0.813-0.058-1.221-0.062c-0.093-0.002-0.183-0.014-0.276-0.014c-0.072,0-0.142,0.01-0.214,0.011 c-4.423,0.016-8.797,1.967-11.746,5.711l-41.096,52.183c-5.127,6.511-4.005,15.947,2.506,21.074 c2.751,2.167,6.023,3.218,9.273,3.218c4.441,0,8.838-1.964,11.798-5.723l14.473-18.379v139.32c0,8.287,6.718,15.005,15.005,15.005 c8.287,0,15.005-6.719,15.005-15.005v-138.41l13.28,17.315c2.955,3.853,7.411,5.875,11.918,5.875c3.186,0,6.398-1.011,9.121-3.1 C313.664,287.35,314.907,277.93,309.863,271.355z" fill="#4f6575"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

44
src/assets/images/box_inactive.svg Normal file
View File

@@ -0,0 +1,44 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 511.999 511.999" style="enable-background:new 0 0 511.999 511.999;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M476.919,141.304l-0.379-0.655c-0.525-1.089-1.131-2.132-1.807-3.124L403.505,14.381C398.374,5.511,388.822,0,378.574,0 H133.437c-10.265,0-19.825,5.524-24.952,14.417l-72.39,125.586c-0.652,1.132-1.122,2.316-1.454,3.519 c-1.019,2.751-1.579,5.724-1.579,8.826v324.365c0,19.456,15.829,35.285,35.285,35.285h375.304 c19.456,0,35.285-15.829,35.285-35.285V151.159c0-0.435-0.013-0.867-0.036-1.297C479.104,146.975,478.478,143.998,476.919,141.304 z M271.518,30.011h106.358l56.032,96.873h-162.39V30.011z M134.136,30.011h107.371v96.873H78.296L134.136,30.011z M448.925,476.714c0,2.908-2.366,5.274-5.274,5.274H68.347c-2.908,0-5.274-2.366-5.274-5.274V156.895h385.852V476.714z" fill="#b4cde4"/>
</g>
</g>
<g>
<g>
<path d="M309.863,271.355l-40.021-52.183c-2.65-3.455-6.509-5.421-10.527-5.794c-0.018-0.002-0.037-0.003-0.055-0.005 c-0.406-0.036-0.813-0.058-1.221-0.062c-0.093-0.002-0.183-0.014-0.276-0.014c-0.072,0-0.142,0.01-0.214,0.011 c-4.423,0.016-8.797,1.967-11.746,5.711l-41.096,52.183c-5.127,6.511-4.005,15.947,2.506,21.074 c2.751,2.167,6.023,3.218,9.273,3.218c4.441,0,8.838-1.964,11.798-5.723l14.473-18.379v139.32c0,8.287,6.718,15.005,15.005,15.005 c8.287,0,15.005-6.719,15.005-15.005v-138.41l13.28,17.315c2.955,3.853,7.411,5.875,11.918,5.875c3.186,0,6.398-1.011,9.121-3.1 C313.664,287.35,314.907,277.93,309.863,271.355z" fill="#b4cde4"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.9 KiB

39
src/assets/images/radar_active.svg Normal file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M512,256C512,114.842,397.158,0,256,0C184.875,0,125.756,24.636,75.29,75.315c-3.319,3.328-3.319,8.73,0.009,12.049 l47.957,47.957c0,0,0.008,0.009,0.008,0.017h0.009l126.694,126.694c3.337,3.337,8.73,3.337,12.066,0s3.337-8.73,0-12.066 l-23.612-23.612c4.966-2.893,10.795-4.489,17.579-4.489c18.825,0,34.133,15.309,34.133,34.133 c0,18.825-15.309,34.133-34.133,34.133c-18.825,0-34.133-15.309-34.133-34.133c0-4.71-3.823-8.533-8.533-8.533 c-4.71,0-8.533,3.823-8.533,8.533c0,28.237,22.963,51.2,51.2,51.2s51.2-22.963,51.2-51.2s-22.963-51.2-51.2-51.2 c-11.477,0-21.666,3.174-29.969,9.165l-36.113-36.113c18.466-15.659,41.6-24.252,66.082-24.252c56.465,0,102.4,45.935,102.4,102.4 c0,44.954-28.877,83.994-71.057,97.468C282.112,341.333,270.037,332.8,256,332.8c-14.046,0-26.112,8.533-31.343,20.676 C182.477,340.002,153.6,300.954,153.6,256c0-15.522,3.499-30.575,10.402-44.723c2.065-4.241,0.307-9.344-3.925-11.418 c-4.25-2.074-9.353-0.299-11.418,3.934c-8.047,16.503-12.126,34.065-12.126,52.207c0,53.419,34.978,99.644,85.692,114.517 c1.826,17.118,16.179,30.549,33.775,30.549c17.596,0,31.949-13.432,33.766-30.549c50.714-14.874,85.7-61.107,85.7-114.517 c0-65.877-53.589-119.467-119.467-119.467c-29.039,0-56.439,10.385-78.148,29.252l-36.181-36.19 c31.437-28.493,71.637-44.262,114.33-44.262c34.816,0,67.934,10.419,96.375,29.961c-1.587,3.934-2.509,8.209-2.509,12.706 c0,18.825,15.309,34.133,34.133,34.133c4.497,0,8.781-0.922,12.715-2.509c19.541,28.442,29.952,61.551,29.952,96.375 c0,94.106-76.561,170.667-170.667,170.667S85.333,350.106,85.333,256c0-33.408,9.728-65.826,28.143-93.756 c2.594-3.934,1.51-9.225-2.432-11.827c-3.934-2.603-9.224-1.502-11.819,2.432C78.967,183.578,68.267,219.238,68.267,256 c0,103.518,84.215,187.733,187.733,187.733S443.733,359.518,443.733,256c0-38.545-11.597-75.179-33.357-106.598 c4.77-5.879,7.757-13.261,7.757-21.402c0-18.825-15.309-34.133-34.133-34.133c-8.141,0-15.531,2.987-21.402,7.765 C331.179,79.863,294.528,68.267,256,68.267c-47.258,0-91.725,17.553-126.396,49.263L93.483,81.408 C139.23,38.127,192.486,17.067,256,17.067c131.755,0,238.933,107.187,238.933,238.933c0,51.703-17.118,102.153-48.026,143.334 c-5.683-4.215-12.638-6.801-20.241-6.801c-18.825,0-34.133,15.309-34.133,34.133c0,7.603,2.586,14.558,6.801,20.241 c-41.182,30.916-91.605,48.026-143.334,48.026C124.245,494.933,17.067,387.746,17.067,256c0-45.175,12.698-89.165,36.736-127.223 c2.517-3.985,1.323-9.259-2.662-11.776c-3.977-2.509-9.259-1.323-11.776,2.662C13.611,160.452,0,207.599,0,256 c0,141.158,114.842,256,256,256c56.883,0,112.307-19.26,157.047-54.067c4.181,1.826,8.781,2.867,13.619,2.867 c18.825,0,34.133-15.309,34.133-34.133c0-4.838-1.041-9.421-2.867-13.602C492.74,368.333,512,312.849,512,256z M256,384 c-9.412,0-17.067-7.654-17.067-17.067s7.654-17.067,17.067-17.067c9.412,0,17.067,7.654,17.067,17.067S265.412,384,256,384z M384,110.933c9.412,0,17.067,7.654,17.067,17.067c0,4.676-1.903,8.909-4.949,11.998c-0.802,0.29-1.604,0.58-2.313,1.118 c-0.631,0.478-1.05,1.101-1.502,1.698c-2.466,1.391-5.282,2.253-8.303,2.253c-9.412,0-17.067-7.654-17.067-17.067 C366.933,118.588,374.588,110.933,384,110.933z M426.667,443.733c-2.509,0-4.864-0.572-7.006-1.544 c-0.06-0.077-0.077-0.171-0.137-0.247c-1.126-1.365-2.62-2.142-4.19-2.62c-3.49-3.123-5.734-7.612-5.734-12.655 c0-9.412,7.654-17.067,17.067-17.067s17.067,7.654,17.067,17.067S436.079,443.733,426.667,443.733z" fill="#4f6575"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

39
src/assets/images/radar_inactive.svg Normal file
View File

@@ -0,0 +1,39 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M512,256C512,114.842,397.158,0,256,0C184.875,0,125.756,24.636,75.29,75.315c-3.319,3.328-3.319,8.73,0.009,12.049 l47.957,47.957c0,0,0.008,0.009,0.008,0.017h0.009l126.694,126.694c3.337,3.337,8.73,3.337,12.066,0s3.337-8.73,0-12.066 l-23.612-23.612c4.966-2.893,10.795-4.489,17.579-4.489c18.825,0,34.133,15.309,34.133,34.133 c0,18.825-15.309,34.133-34.133,34.133c-18.825,0-34.133-15.309-34.133-34.133c0-4.71-3.823-8.533-8.533-8.533 c-4.71,0-8.533,3.823-8.533,8.533c0,28.237,22.963,51.2,51.2,51.2s51.2-22.963,51.2-51.2s-22.963-51.2-51.2-51.2 c-11.477,0-21.666,3.174-29.969,9.165l-36.113-36.113c18.466-15.659,41.6-24.252,66.082-24.252c56.465,0,102.4,45.935,102.4,102.4 c0,44.954-28.877,83.994-71.057,97.468C282.112,341.333,270.037,332.8,256,332.8c-14.046,0-26.112,8.533-31.343,20.676 C182.477,340.002,153.6,300.954,153.6,256c0-15.522,3.499-30.575,10.402-44.723c2.065-4.241,0.307-9.344-3.925-11.418 c-4.25-2.074-9.353-0.299-11.418,3.934c-8.047,16.503-12.126,34.065-12.126,52.207c0,53.419,34.978,99.644,85.692,114.517 c1.826,17.118,16.179,30.549,33.775,30.549c17.596,0,31.949-13.432,33.766-30.549c50.714-14.874,85.7-61.107,85.7-114.517 c0-65.877-53.589-119.467-119.467-119.467c-29.039,0-56.439,10.385-78.148,29.252l-36.181-36.19 c31.437-28.493,71.637-44.262,114.33-44.262c34.816,0,67.934,10.419,96.375,29.961c-1.587,3.934-2.509,8.209-2.509,12.706 c0,18.825,15.309,34.133,34.133,34.133c4.497,0,8.781-0.922,12.715-2.509c19.541,28.442,29.952,61.551,29.952,96.375 c0,94.106-76.561,170.667-170.667,170.667S85.333,350.106,85.333,256c0-33.408,9.728-65.826,28.143-93.756 c2.594-3.934,1.51-9.225-2.432-11.827c-3.934-2.603-9.224-1.502-11.819,2.432C78.967,183.578,68.267,219.238,68.267,256 c0,103.518,84.215,187.733,187.733,187.733S443.733,359.518,443.733,256c0-38.545-11.597-75.179-33.357-106.598 c4.77-5.879,7.757-13.261,7.757-21.402c0-18.825-15.309-34.133-34.133-34.133c-8.141,0-15.531,2.987-21.402,7.765 C331.179,79.863,294.528,68.267,256,68.267c-47.258,0-91.725,17.553-126.396,49.263L93.483,81.408 C139.23,38.127,192.486,17.067,256,17.067c131.755,0,238.933,107.187,238.933,238.933c0,51.703-17.118,102.153-48.026,143.334 c-5.683-4.215-12.638-6.801-20.241-6.801c-18.825,0-34.133,15.309-34.133,34.133c0,7.603,2.586,14.558,6.801,20.241 c-41.182,30.916-91.605,48.026-143.334,48.026C124.245,494.933,17.067,387.746,17.067,256c0-45.175,12.698-89.165,36.736-127.223 c2.517-3.985,1.323-9.259-2.662-11.776c-3.977-2.509-9.259-1.323-11.776,2.662C13.611,160.452,0,207.599,0,256 c0,141.158,114.842,256,256,256c56.883,0,112.307-19.26,157.047-54.067c4.181,1.826,8.781,2.867,13.619,2.867 c18.825,0,34.133-15.309,34.133-34.133c0-4.838-1.041-9.421-2.867-13.602C492.74,368.333,512,312.849,512,256z M256,384 c-9.412,0-17.067-7.654-17.067-17.067s7.654-17.067,17.067-17.067c9.412,0,17.067,7.654,17.067,17.067S265.412,384,256,384z M384,110.933c9.412,0,17.067,7.654,17.067,17.067c0,4.676-1.903,8.909-4.949,11.998c-0.802,0.29-1.604,0.58-2.313,1.118 c-0.631,0.478-1.05,1.101-1.502,1.698c-2.466,1.391-5.282,2.253-8.303,2.253c-9.412,0-17.067-7.654-17.067-17.067 C366.933,118.588,374.588,110.933,384,110.933z M426.667,443.733c-2.509,0-4.864-0.572-7.006-1.544 c-0.06-0.077-0.077-0.171-0.137-0.247c-1.126-1.365-2.62-2.142-4.19-2.62c-3.49-3.123-5.734-7.612-5.734-12.655 c0-9.412,7.654-17.067,17.067-17.067s17.067,7.654,17.067,17.067S436.079,443.733,426.667,443.733z" fill="#b4cde4"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.9 KiB

2
src/assets/images/return_box_active.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

2
src/assets/images/return_box_inactive.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

49
src/assets/images/search_book_active.svg Normal file
View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M502.279,306.913l-50.882-50.883c13.204-31.383,9.017-68.407-12.56-96.211v-58.041c0-5.523-4.477-10-10-10h-24.766v-15.15 c0-5.523-4.487-10.01-10.01-10.01H263.016c-17.946,0-33.859,8.867-43.591,22.449c-9.731-13.583-25.645-22.449-43.591-22.449 H44.776c-5.523,0-10.011,4.488-10.011,10.011v15.149H10c-5.523,0-10,4.477-10,10v333.604c0,5.523,4.477,10,10,10h418.838 c5.523,0,10-4.477,10-10v-97.378l16.175,16.175c6.47,6.469,14.965,9.704,23.464,9.704c8.501,0,17.006-3.238,23.481-9.714 l0.321-0.321c6.269-6.268,9.721-14.603,9.721-23.468S508.548,313.18,502.279,306.913z M404.072,111.778h14.766v28.761 c-4.675-3.362-9.614-6.278-14.766-8.725V111.778z M416.683,164.876v0.001c29.658,29.657,29.658,77.913,0,107.571 c-4.31,4.31-9.047,8.039-14.114,11.148c-0.262,0.143-0.518,0.298-0.769,0.465c-11.643,6.954-24.987,10.665-38.902,10.665 c-20.317,0-39.419-7.912-53.785-22.278c-29.657-29.658-29.657-77.914,0-107.571c14.366-14.367,33.468-22.279,53.785-22.279 C383.216,142.598,402.317,150.51,416.683,164.876z M209.419,425.382H20V111.778h14.766v275.348c0,5.523,4.478,10,10,10h164.653 V425.382z M209.419,377.126H54.766v-25.554h121.068c12.65,0,24.435,4.541,33.585,12.865V377.126z M175.835,331.571H54.766V86.618 h121.068c18.522,0,33.591,15.069,33.591,33.591v152.268c0,5.523,4.477,10,10,10c5.522,0,10-4.477,10-10V120.209 c0-18.522,15.068-33.591,33.591-33.591h121.057v38.308c-6.871-1.538-13.962-2.328-21.175-2.328 c-25.659,0-49.783,9.993-67.928,28.137c-37.454,37.455-37.454,98.4,0,135.855c18.145,18.144,42.269,28.136,67.928,28.136 c7.212,0,14.304-0.79,21.175-2.328v19.173H263.016c-15.896,0-31.322,5.436-43.591,15.156 C207.156,337.007,191.73,331.571,175.835,331.571z M384.073,351.572v25.554H229.419v-12.679 c9.151-8.33,20.941-12.875,33.597-12.875H384.073z M418.838,425.382H229.419v-28.256h164.653c5.522,0,10-4.477,10-10v-81.615 c0.512-0.243,1.022-0.491,1.529-0.743l13.237,13.237V425.382z M488.127,339.715l-0.321,0.321c-5.143,5.143-13.508,5.143-18.65,0 l-46.301-46.301c2.766-2.218,5.428-4.602,7.971-7.145c3.892-3.892,7.38-8.038,10.463-12.385l46.849,46.85 c2.491,2.491,3.863,5.802,3.863,9.325C492,333.902,490.628,337.214,488.127,339.715z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M426.712,218.663c0-17.069-6.632-33.1-18.673-45.142c-12.042-12.041-28.074-18.672-45.142-18.672 c-17.069,0-33.1,6.631-45.141,18.672c-12.041,12.041-18.673,28.073-18.673,45.141s6.632,33.1,18.673,45.141 c12.041,12.042,28.073,18.673,45.141,18.673c17.07,0,33.101-6.631,45.142-18.673v0.001 C420.08,251.763,426.712,235.731,426.712,218.663z M393.896,249.661c0,0,0,0,0,0.001c-8.264,8.263-19.272,12.814-30.999,12.814 c-11.726,0-22.734-4.551-30.998-12.815c-8.264-8.264-12.815-19.273-12.815-30.999s4.55-22.735,12.815-30.999 c8.264-8.263,19.272-12.814,30.998-12.814c11.727,0,22.736,4.55,30.999,12.814c8.264,8.264,12.815,19.272,12.815,30.999 S402.161,241.397,393.896,249.661z" fill="#4f6575"/>
</g>
</g>
<g>
<g>
<path d="M229.229,304.04c-0.13-0.63-0.319-1.26-0.569-1.87c-0.25-0.6-0.561-1.18-0.92-1.72c-0.37-0.55-0.78-1.06-1.24-1.52 c-0.469-0.46-0.98-0.88-1.52-1.25c-0.55-0.36-1.13-0.66-1.73-0.91c-0.6-0.25-1.23-0.45-1.87-0.58c-1.29-0.26-2.62-0.26-3.91,0 c-0.64,0.13-1.269,0.33-1.87,0.58c-0.599,0.25-1.179,0.55-1.729,0.91c-0.541,0.37-1.061,0.79-1.521,1.25 c-0.46,0.46-0.88,0.97-1.24,1.52c-0.359,0.54-0.67,1.12-0.92,1.72c-0.25,0.61-0.439,1.24-0.569,1.87c-0.13,0.65-0.2,1.31-0.2,1.96 s0.07,1.31,0.2,1.95s0.319,1.27,0.569,1.87c0.25,0.61,0.561,1.19,0.92,1.73c0.36,0.55,0.78,1.06,1.24,1.52 c0.46,0.46,0.981,0.88,1.521,1.24c0.549,0.36,1.129,0.67,1.729,0.92c0.6,0.25,1.23,0.45,1.87,0.57c0.639,0.13,1.3,0.2,1.95,0.2 c0.66,0,1.31-0.07,1.96-0.2c0.64-0.12,1.269-0.32,1.87-0.57c0.6-0.25,1.18-0.56,1.73-0.92c0.54-0.36,1.05-0.78,1.52-1.24 c0.46-0.46,0.87-0.97,1.24-1.52c0.359-0.54,0.67-1.12,0.92-1.73c0.25-0.6,0.439-1.23,0.569-1.87s0.2-1.3,0.2-1.95 C229.429,305.35,229.359,304.69,229.229,304.04z" fill="#4f6575"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

49
src/assets/images/search_book_inactive.svg Normal file
View File

@@ -0,0 +1,49 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<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 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve" width="512px" height="512px">
<g>
<g>
<path d="M502.279,306.913l-50.882-50.883c13.204-31.383,9.017-68.407-12.56-96.211v-58.041c0-5.523-4.477-10-10-10h-24.766v-15.15 c0-5.523-4.487-10.01-10.01-10.01H263.016c-17.946,0-33.859,8.867-43.591,22.449c-9.731-13.583-25.645-22.449-43.591-22.449 H44.776c-5.523,0-10.011,4.488-10.011,10.011v15.149H10c-5.523,0-10,4.477-10,10v333.604c0,5.523,4.477,10,10,10h418.838 c5.523,0,10-4.477,10-10v-97.378l16.175,16.175c6.47,6.469,14.965,9.704,23.464,9.704c8.501,0,17.006-3.238,23.481-9.714 l0.321-0.321c6.269-6.268,9.721-14.603,9.721-23.468S508.548,313.18,502.279,306.913z M404.072,111.778h14.766v28.761 c-4.675-3.362-9.614-6.278-14.766-8.725V111.778z M416.683,164.876v0.001c29.658,29.657,29.658,77.913,0,107.571 c-4.31,4.31-9.047,8.039-14.114,11.148c-0.262,0.143-0.518,0.298-0.769,0.465c-11.643,6.954-24.987,10.665-38.902,10.665 c-20.317,0-39.419-7.912-53.785-22.278c-29.657-29.658-29.657-77.914,0-107.571c14.366-14.367,33.468-22.279,53.785-22.279 C383.216,142.598,402.317,150.51,416.683,164.876z M209.419,425.382H20V111.778h14.766v275.348c0,5.523,4.478,10,10,10h164.653 V425.382z M209.419,377.126H54.766v-25.554h121.068c12.65,0,24.435,4.541,33.585,12.865V377.126z M175.835,331.571H54.766V86.618 h121.068c18.522,0,33.591,15.069,33.591,33.591v152.268c0,5.523,4.477,10,10,10c5.522,0,10-4.477,10-10V120.209 c0-18.522,15.068-33.591,33.591-33.591h121.057v38.308c-6.871-1.538-13.962-2.328-21.175-2.328 c-25.659,0-49.783,9.993-67.928,28.137c-37.454,37.455-37.454,98.4,0,135.855c18.145,18.144,42.269,28.136,67.928,28.136 c7.212,0,14.304-0.79,21.175-2.328v19.173H263.016c-15.896,0-31.322,5.436-43.591,15.156 C207.156,337.007,191.73,331.571,175.835,331.571z M384.073,351.572v25.554H229.419v-12.679 c9.151-8.33,20.941-12.875,33.597-12.875H384.073z M418.838,425.382H229.419v-28.256h164.653c5.522,0,10-4.477,10-10v-81.615 c0.512-0.243,1.022-0.491,1.529-0.743l13.237,13.237V425.382z M488.127,339.715l-0.321,0.321c-5.143,5.143-13.508,5.143-18.65,0 l-46.301-46.301c2.766-2.218,5.428-4.602,7.971-7.145c3.892-3.892,7.38-8.038,10.463-12.385l46.849,46.85 c2.491,2.491,3.863,5.802,3.863,9.325C492,333.902,490.628,337.214,488.127,339.715z" fill="#b4cde4"/>
</g>
</g>
<g>
<g>
<path d="M426.712,218.663c0-17.069-6.632-33.1-18.673-45.142c-12.042-12.041-28.074-18.672-45.142-18.672 c-17.069,0-33.1,6.631-45.141,18.672c-12.041,12.041-18.673,28.073-18.673,45.141s6.632,33.1,18.673,45.141 c12.041,12.042,28.073,18.673,45.141,18.673c17.07,0,33.101-6.631,45.142-18.673v0.001 C420.08,251.763,426.712,235.731,426.712,218.663z M393.896,249.661c0,0,0,0,0,0.001c-8.264,8.263-19.272,12.814-30.999,12.814 c-11.726,0-22.734-4.551-30.998-12.815c-8.264-8.264-12.815-19.273-12.815-30.999s4.55-22.735,12.815-30.999 c8.264-8.263,19.272-12.814,30.998-12.814c11.727,0,22.736,4.55,30.999,12.814c8.264,8.264,12.815,19.272,12.815,30.999 S402.161,241.397,393.896,249.661z" fill="#b4cde4"/>
</g>
</g>
<g>
<g>
<path d="M229.229,304.04c-0.13-0.63-0.319-1.26-0.569-1.87c-0.25-0.6-0.561-1.18-0.92-1.72c-0.37-0.55-0.78-1.06-1.24-1.52 c-0.469-0.46-0.98-0.88-1.52-1.25c-0.55-0.36-1.13-0.66-1.73-0.91c-0.6-0.25-1.23-0.45-1.87-0.58c-1.29-0.26-2.62-0.26-3.91,0 c-0.64,0.13-1.269,0.33-1.87,0.58c-0.599,0.25-1.179,0.55-1.729,0.91c-0.541,0.37-1.061,0.79-1.521,1.25 c-0.46,0.46-0.88,0.97-1.24,1.52c-0.359,0.54-0.67,1.12-0.92,1.72c-0.25,0.61-0.439,1.24-0.569,1.87c-0.13,0.65-0.2,1.31-0.2,1.96 s0.07,1.31,0.2,1.95s0.319,1.27,0.569,1.87c0.25,0.61,0.561,1.19,0.92,1.73c0.36,0.55,0.78,1.06,1.24,1.52 c0.46,0.46,0.981,0.88,1.521,1.24c0.549,0.36,1.129,0.67,1.729,0.92c0.6,0.25,1.23,0.45,1.87,0.57c0.639,0.13,1.3,0.2,1.95,0.2 c0.66,0,1.31-0.07,1.96-0.2c0.64-0.12,1.269-0.32,1.87-0.57c0.6-0.25,1.18-0.56,1.73-0.92c0.54-0.36,1.05-0.78,1.52-1.24 c0.46-0.46,0.87-0.97,1.24-1.52c0.359-0.54,0.67-1.12,0.92-1.73c0.25-0.6,0.439-1.23,0.569-1.87s0.2-1.3,0.2-1.95 C229.429,305.35,229.359,304.69,229.229,304.04z" fill="#b4cde4"/>
</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>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

3
src/assets/scss/_variables.scss
View File

@@ -1,4 +1,5 @@
/* constants declaration */
$color-active: #4F6575;
$color-inactive: #e6faff;//#C4E0F5;
$color-inactive: #b4cde4; //#C4E0F5;
$hima-content-color: #e6faff;
$hima-color-red: #EA0000;

9
src/styles.scss
View File

@@ -2,6 +2,7 @@
body {
font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
margin: 0px;
height: 100vh;
}
.align-left {
@@ -27,4 +28,12 @@ body {
.mx-8 {
margin-left: 8px;
margin-right: 8px;
}
.mr-5 {
margin-right: 5px;
}
.ml-5 {
margin-left: 5px;
}