From 1adb32a410922190ac664697f1010967f64fcc27 Mon Sep 17 00:00:00 2001 From: Gabor PEK Date: Wed, 7 Mar 2018 14:18:51 +0100 Subject: [PATCH] Use grid layout for messages --- src/app/messages/messages.component.html | 20 +-- src/app/messages/messages.component.scss | 193 ++++++++++++++++++++++- src/assets/images/avataobot.svg | 1 + 3 files changed, 196 insertions(+), 18 deletions(-) mode change 100644 => 100755 src/app/messages/messages.component.html mode change 100644 => 100755 src/app/messages/messages.component.scss create mode 100755 src/assets/images/avataobot.svg diff --git a/src/app/messages/messages.component.html b/src/app/messages/messages.component.html old mode 100644 new mode 100755 index 733d749..611e077 --- a/src/app/messages/messages.component.html +++ b/src/app/messages/messages.component.html @@ -1,11 +1,11 @@ -
- +
+
Instructions
+
+
+ +
{{message.originator}}
+
{{message.timestamp | date:'yyyy-MM-dd HH:mm:ss'}}
+
+
+
diff --git a/src/app/messages/messages.component.scss b/src/app/messages/messages.component.scss old mode 100644 new mode 100755 index 3cc4d7a..8e4eb5c --- a/src/app/messages/messages.component.scss +++ b/src/app/messages/messages.component.scss @@ -1,14 +1,191 @@ -div { +// +// Spaces +// + +$space: 24px; + +$sxlarge: 9 * $space; +$xxxlarge: 6 * $space; +$xxlarge: 4 * $space; +$xlarge: 2 * $space; +$large: 1.5 * $space; +$medium: $space; +$small: 0.75 * $space; +$tiny: 0.5 * $space; +$hair: 0.25 * $space; +$nano: 0.125 * $space; + + +// Color system + +// Tao blue palette +$tao-blue-50: #F2F7FE; +$tao-blue-100: #C9DFFA; +$tao-blue-200: #A0C6F7; +$tao-blue-300: #77AEF3; +$tao-blue-400: #4E95EF; +$tao-blue-500: #277EEC; +$tao-blue-600: #2170B7; +$tao-blue-700: #195684; +$tao-blue-800: #103B5B; +$tao-blue-900: #081A2B; + +// Tao sky palette +$tao-sky-50: #F1FAFD; +$tao-sky-100: #C5E9F5; +$tao-sky-200: #9AD8EE; +$tao-sky-300: #6EC7E6; +$tao-sky-400: #42B7DF; +$tao-sky-500: #19A7D8; +$tao-sky-600: #0E8BA8; +$tao-sky-700: #04647A; +$tao-sky-800: #004251; +$tao-sky-900: #002028; + +// Tao phtalo palette +$tao-phtalo-50: #F2FBFC; +$tao-phtalo-100: #C8EDF1; +$tao-phtalo-200: #9FDFE6; +$tao-phtalo-300: #75D1DB; +$tao-phtalo-400: #4CC3D0; +$tao-phtalo-500: #24B6C6; +$tao-phtalo-600: #16989E; +$tao-phtalo-700: #0C7575; +$tao-phtalo-800: #034C4F; +$tao-phtalo-900: #002426; + +// Tao turqoise palette +$tao-turqoise-50: #F1FBFB; +$tao-turqoise-100: #C3EFEF; +$tao-turqoise-200: #96E3E3; +$tao-turqoise-300: #68D7D7; +$tao-turqoise-400: #3BCBCB; +$tao-turqoise-500: #10BFBF; +$tao-turqoise-600: #079995; +$tao-turqoise-700: #00726F; +$tao-turqoise-800: #004C4A; +$tao-turqoise-900: #002625; + +// Tao bright green palette +$tao-bright-green-50: #effbf7; +$tao-bright-green-100: #c5f2e4; +$tao-bright-green-200: #a0ead3; +$tao-bright-green-300: #7ae2c2; +$tao-bright-green-400: #55d9b0; +$tao-bright-green-500: #2fd19f; +$tao-bright-green-600: #2ab587; +$tao-bright-green-700: #248e63; +$tao-bright-green-800: #1c6844; +$tao-bright-green-900: #114431; + +// Tao warm yellow palette +$tao-warm-yellow-50: #FFF8EB; +$tao-warm-yellow-100: #FFEDCE; +$tao-warm-yellow-200: #FFE0A9; +$tao-warm-yellow-300: #FFD283; +$tao-warm-yellow-400: #FFC55E; +$tao-warm-yellow-500: #FFB83B; +$tao-warm-yellow-600: #E59C3C; +$tao-warm-yellow-700: #CC8B36; +$tao-warm-yellow-800: #B2762F; +$tao-warm-yellow-900: #996526; + +// Tao plum palette +$tao-plum-50: #F6F8FD; +$tao-plum-100: #DADFF8; +$tao-plum-200: #BEC7F3; +$tao-plum-300: #A2AFED; +$tao-plum-400: #8797E8; +$tao-plum-500: #6C80E3; +$tao-plum-600: #5E77BF; +$tao-plum-700: #4B5E99; +$tao-plum-800: #384672; +$tao-plum-900: #272F4C; + +// Tao pink palette +$tao-pink-50: #FFF0F7; +$tao-pink-100: #FFBFDF; +$tao-pink-200: #FF8FC6; +$tao-pink-300: #FF5EAE; +$tao-pink-400: #FF2E95; +$tao-pink-500: #FF007E; +$tao-pink-600: #D8007C; +$tao-pink-700: #B20066; +$tao-pink-800: #8C0050; +$tao-pink-900: #66003A; + +// Tao red palette +$tao-red-50: #FFF5F5; +$tao-red-100: #FFD4D4; +$tao-red-200: #FFB3B3; +$tao-red-300: #FF9292; +$tao-red-400: #FF7171; +$tao-red-500: #FF5252; +$tao-red-600: #E54848; +$tao-red-700: #CC3636; +$tao-red-800: #B22424; +$tao-red-900: #991919; + +// Tao gray palette +$tao-gray-50: #FAFAFA; +$tao-gray-100: #F2F2F2; +$tao-gray-200: #D6D6D6; +$tao-gray-300: #A0A0A0; +$tao-gray-400: #777777; +$tao-gray-500: #555555; +$tao-gray-600: #323232; +$tao-gray-700: #232323; +$tao-gray-800: #0C0C0C; +$tao-gray-900: #000000; + +// Panel border radius +$tao-panel-border-radius: 14px; +$tao-panel-border-radius-sm: 8px; +$tao-input-border-radius: 6px; + +$font-size-nano: 11px; +$font-size-tiny: 12px; +$font-size-small: 13px; +$font-size-base: 14px; + + +.tao-messages-main { display: block; overflow: auto; - max-height: 100%; + + h5 { + margin-bottom: $small; + color: $tao-blue-500; + font-weight: 500; + } +} +.tao-grid-message { + display: grid; + grid-template-rows: 1fr auto; + grid-row-gap: $nano; + width: 100%; + + background-color: $tao-gray-100; + border-radius: $tao-panel-border-radius-sm; + padding: $tiny; + font-size: $font-size-base; + margin-bottom: $small; } -ul { - max-height: inherit; - list-style-type: none; +.tao-grid-message-header { + display: grid; + grid-template-columns: 1fr 5fr 8fr; + grid-column-gap: 0; + width: 100%; + + img { + width: 12px; + } + + .timestamp { + font-size: $font-size-tiny; + opacity: 0.37; + } + } -.timestamp { - opacity: 0.37; -} diff --git a/src/assets/images/avataobot.svg b/src/assets/images/avataobot.svg new file mode 100755 index 0000000..70bbbe2 --- /dev/null +++ b/src/assets/images/avataobot.svg @@ -0,0 +1 @@ +avataobot \ No newline at end of file