From 3eeeb87fe62fab3e48455f53c8a725b49878b9b3 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Mon, 1 May 2017 18:05:28 +0200 Subject: Client: try to be responsive --- client/src/app/core/menu/menu-admin.component.scss | 39 ----------------- client/src/app/core/menu/menu-admin.component.ts | 2 +- client/src/app/core/menu/menu.component.scss | 50 ++++++++++++++++++++++ client/src/app/core/menu/menu.component.ts | 2 +- 4 files changed, 52 insertions(+), 41 deletions(-) delete mode 100644 client/src/app/core/menu/menu-admin.component.scss create mode 100644 client/src/app/core/menu/menu.component.scss (limited to 'client/src/app/core/menu') diff --git a/client/src/app/core/menu/menu-admin.component.scss b/client/src/app/core/menu/menu-admin.component.scss deleted file mode 100644 index 5881475f1..000000000 --- a/client/src/app/core/menu/menu-admin.component.scss +++ /dev/null @@ -1,39 +0,0 @@ -menu { - background-color: $black-background; - padding: 25px; - margin: 0; - height: 100%; - - .panel-block { - margin-bottom: 15px; - } - - .block-title { - text-transform: uppercase; - font-weight: bold; - color: $menu-color-block; - margin-bottom: 10px; - } - - a { - display: block; - margin-left: 5px; - height: 30px; - color: $menu-color-link; - cursor: pointer; - transition: color 0.3s; - - &:hover, &:focus { - text-decoration: none !important; - outline: none !important; - } - - .glyphicon { - margin-right: 15px; - } - - &:hover, &.active { - color: #fff; - } - } -} diff --git a/client/src/app/core/menu/menu-admin.component.ts b/client/src/app/core/menu/menu-admin.component.ts index a3d920fdd..236161fce 100644 --- a/client/src/app/core/menu/menu-admin.component.ts +++ b/client/src/app/core/menu/menu-admin.component.ts @@ -3,6 +3,6 @@ import { Component } from '@angular/core'; @Component({ selector: 'my-menu-admin', templateUrl: './menu-admin.component.html', - styleUrls: [ './menu-admin.component.scss' ] + styleUrls: [ './menu.component.scss' ] }) export class MenuAdminComponent { } diff --git a/client/src/app/core/menu/menu.component.scss b/client/src/app/core/menu/menu.component.scss new file mode 100644 index 000000000..38a6b95b6 --- /dev/null +++ b/client/src/app/core/menu/menu.component.scss @@ -0,0 +1,50 @@ +menu { + background-color: $black-background; + padding: 15px; + margin: 0; + height: 100%; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + + @media screen and (max-width: 550px) { + font-size: 90%; + } + + @media screen and (min-width: 1200px) { + padding: 25px; + } + + .panel-block { + margin-bottom: 15px; + } + + .block-title { + text-transform: uppercase; + font-weight: bold; + color: $menu-color-block; + margin-bottom: 10px; + } + + a { + display: block; + margin-left: 5px; + height: 30px; + color: $menu-color-link; + cursor: pointer; + transition: color 0.3s; + + &:hover, &:focus { + text-decoration: none !important; + outline: none !important; + } + + .glyphicon { + margin-right: 15px; + } + + &:hover, &.active { + color: #fff; + } + } +} diff --git a/client/src/app/core/menu/menu.component.ts b/client/src/app/core/menu/menu.component.ts index e2b998747..5ab8bf464 100644 --- a/client/src/app/core/menu/menu.component.ts +++ b/client/src/app/core/menu/menu.component.ts @@ -7,7 +7,7 @@ import { ConfigService } from '../config'; @Component({ selector: 'my-menu', templateUrl: './menu.component.html', - styleUrls: [ './menu-admin.component.scss' ] + styleUrls: [ './menu.component.scss' ] }) export class MenuComponent implements OnInit { isLoggedIn: boolean; -- cgit v1.2.3