Crayons'ifizing Header (#6780) [deploy]
* add tons of colors * add tons of colors * moving cheese around and prepping for new theming system * documenting * . * moving theme code to own files * replacing some variables * whitespaces * replacing another batch of variables * get rid of another variable * replace loading animation variable with one-fits-all-sizes * get rid of theme-anchor-color * remove code colors variables * another batch of variables replaced * mostly bringing in variables for haxor theme * remove invert-image variable for chat * remove another inver-image variable * forgot to remove reaction-background variable * remove border variable * series * . * remove another variable * remove another variable.. * another batch of variables * and more... * header updates * i forgot to commits things in my PR.... * fix border * . * simplifyuing placeholder * responsiveness * responsive * search fix * fixing prefix-less classes * increase clickable area * small style updates for pink theme * tests * Fix test * responsive dropdown * tiny fixes * generator rewritten * dropdown reworked a little * adjustments * fix pwa Co-authored-by: rhymes <rhymesete@gmail.com>
This commit is contained in:
ludwiczakpawel
GitHub
parent
353af9fcff
commit
209c01037a
29 changed files with 309 additions and 463 deletions
|
|
@ -1 +1 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.54 3.652a1.5 1.5 0 012.92 0 7.028 7.028 0 00-2.92 0zM9.5 3.96a2.5 2.5 0 015 0A7.003 7.003 0 0119 10.5v4.626c1.725.444 3 2.01 3 3.874v.5a.5.5 0 01-.5.5h-7.02c-.048.602-.194 1.16-.51 1.603-.427.597-1.097.897-1.97.897s-1.543-.3-1.97-.897c-.316-.443-.463-1.001-.51-1.603H2.5a.5.5 0 01-.5-.5v-.7a3.801 3.801 0 013-3.716V10.5a7.003 7.003 0 014.5-6.54zM6 15h.5a.5.5 0 010 1h-.7A2.8 2.8 0 003 18.8v.2h18a3 3 0 00-3-3h-8a.5.5 0 010-1h8v-4.5a6 6 0 00-12 0V15zm7.477 5h-2.954c.045.452.155.79.321 1.022.199.278.53.478 1.156.478.627 0 .957-.2 1.156-.478.166-.233.276-.57.32-1.022z" /></svg>
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M20 17h2v2H2v-2h2v-7a8 8 0 1116 0v7zm-2 0v-7a6 6 0 10-12 0v7h12zm-9 4h6v2H9v-2z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 693 B After Width: | Height: | Size: 161 B |
|
|
@ -1 +1 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M22.36 1.654a.5.5 0 01.107.524l-7.619 20a.5.5 0 01-.914.046l-2.75-5.502L7.77 18.92a.5.5 0 01-.743-.586l1.973-5.608-7.225-3.612a.5.5 0 01.066-.922l20-6.666a.5.5 0 01.519.128zM9.7 13.754l1.033 2.069-2.277 1.466 1.243-3.534zm-.152-1.872l10.147-8.587L3.303 8.76l6.245 3.123zm11.294-8.247L14.32 20.758l-4.077-8.154 10.6-8.97z"/></svg>
|
||||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M2 12C2 6.477 6.477 2 12 2s10 4.477 10 10-4.477 10-10 10H2l2.929-2.929A9.969 9.969 0 012 12zm4.828 8H12a8 8 0 10-8-8c0 2.152.851 4.165 2.343 5.657l1.414 1.414-.929.929zM8 13h8a4 4 0 11-8 0z"/></svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 441 B After Width: | Height: | Size: 271 B |
1
app/assets/images/hamburger.svg
Normal file
1
app/assets/images/hamburger.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z" /></svg>
|
||||
|
After Width: | Height: | Size: 127 B |
1
app/assets/images/mod.svg
Normal file
1
app/assets/images/mod.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg width="24" height="24" xmlns="http://www.w3.org/2000/svg"><path d="M3.783 2.826L12 1l8.217 1.826a1 1 0 01.783.976v9.987a6 6 0 01-2.672 4.992L12 23l-6.328-4.219A6 6 0 013 13.79V3.802a1 1 0 01.783-.976zM5 4.604v9.185a4 4 0 001.781 3.328L12 20.597l5.219-3.48A4 4 0 0019 13.79V4.604L12 3.05 5 4.604zM13 10h3l-5 7v-5H8l5-7v5z"/></svg>
|
||||
|
After Width: | Height: | Size: 335 B |
|
|
@ -103,10 +103,9 @@ function addRelevantButtonsToComments(user) {
|
|||
function initializeBaseUserData() {
|
||||
const user = userData();
|
||||
const userProfileLinkHTML =
|
||||
'<a href="/' +
|
||||
user.username +
|
||||
'" id="first-nav-link"><div class="option prime-option">@' +
|
||||
user.username +
|
||||
'<a href="/' + user.username + '" id="first-nav-link" class="crayons-nav-block"><div>' +
|
||||
'<span class="fw-medium block color-base-100">' + user.name +'</span>' +
|
||||
'<small class="fs-s color-base-50">@' + user.username + '</small>' +
|
||||
'</div></a>';
|
||||
document.getElementById(
|
||||
'user-profile-link-placeholder',
|
||||
|
|
|
|||
|
|
@ -10,23 +10,23 @@ function getClassList(className) {
|
|||
function blur(event, className) {
|
||||
setTimeout(() => {
|
||||
if (document.activeElement !== getById(className)) {
|
||||
getClassList('navbar-menu-wrapper').remove('showing');
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
}
|
||||
}, 10);
|
||||
}
|
||||
|
||||
function removeShowingMenu() {
|
||||
getClassList('navbar-menu-wrapper').remove('showing');
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
setTimeout(() => {
|
||||
getClassList('navbar-menu-wrapper').remove('showing');
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
}, 5);
|
||||
setTimeout(() => {
|
||||
getClassList('navbar-menu-wrapper').remove('showing');
|
||||
getClassList('top-bar__menu').remove('showing');
|
||||
}, 150);
|
||||
}
|
||||
|
||||
function toggleMenu() {
|
||||
getClassList('navbar-menu-wrapper').toggle('showing');
|
||||
getClassList('top-bar__menu').toggle('showing');
|
||||
}
|
||||
|
||||
function initializeTouchDevice() {
|
||||
|
|
@ -44,9 +44,9 @@ function initializeTouchDevice() {
|
|||
// Use a named function instead of anonymous so duplicate event handlers are discarded
|
||||
getById('navigation-butt').addEventListener('click', toggleMenu);
|
||||
} else {
|
||||
getClassList('navbar-menu-wrapper').add('desktop');
|
||||
getClassList('top-bar__menu').add('desktop');
|
||||
getById('navigation-butt').addEventListener('focus', e =>
|
||||
getClassList('navbar-menu-wrapper').add('showing'),
|
||||
getClassList('top-bar__menu').add('showing'),
|
||||
);
|
||||
getById('last-nav-link').addEventListener('blur', e =>
|
||||
blur(e, 'second-last-nav-link'),
|
||||
|
|
@ -55,8 +55,5 @@ function initializeTouchDevice() {
|
|||
blur(e, 'first-nav-link'),
|
||||
);
|
||||
}
|
||||
getById('menubg').addEventListener('click', e =>
|
||||
getClassList('navbar-menu-wrapper').remove('showing'),
|
||||
);
|
||||
}, 10);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +1,6 @@
|
|||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.job-listing-header {
|
||||
color: #007777;
|
||||
background: #bafff1;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,15 @@
|
|||
@import '../config/import';
|
||||
@import '../base/boxes';
|
||||
|
||||
%dropdown-style {
|
||||
.crayons-dropdown {
|
||||
@extend .crayons-box;
|
||||
@extend .crayons-box--level-2;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.crayons-dropdown {
|
||||
@extend %dropdown-style;
|
||||
position: absolute;
|
||||
display: none; // initially hidden
|
||||
padding: $su-4;
|
||||
min-width: 164px;
|
||||
max-width: 250px;
|
||||
min-width: 200px;
|
||||
|
||||
&--l {
|
||||
min-width: 251px;
|
||||
@media (min-width: $breakpoint-s) {
|
||||
max-width: 320px;
|
||||
padding: $su-6;
|
||||
}
|
||||
|
||||
&--padding-0 {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
|
||||
@include indicator(&, accent, var(--accent-brand));
|
||||
@include indicator(&, critical, var(--accent-danger));
|
||||
@include indicator(&, success, var(--accent-success));
|
||||
@include indicator(&, inverted, var(--widget-color));
|
||||
|
||||
// Circle, no text
|
||||
|
|
|
|||
|
|
@ -3,10 +3,14 @@
|
|||
.crayons-nav-block {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: $su-2;
|
||||
padding: $su-3;
|
||||
border-radius: $br-default;
|
||||
color: var(--link-dimmed-color);
|
||||
|
||||
@media (min-width: $breakpoint-s) {
|
||||
padding: $su-2;
|
||||
}
|
||||
|
||||
&:hover:not(&--current) {
|
||||
background: var(--link-dimmed-bg-hover);
|
||||
color: var(--link-dimmed-color-hover);
|
||||
|
|
|
|||
|
|
@ -69,7 +69,8 @@
|
|||
--widget-headline: var(--base-100);
|
||||
|
||||
// Header
|
||||
--header-bg: #fdf9f3; // todo: replace with `var(--base-inverted)` when ready.
|
||||
--header-bg: var(--base-inverted);
|
||||
--header-shadow: rgba(0,0,0,0.1);
|
||||
--header-icons-color: var(--base-70);
|
||||
--header-icons-color-hover: var(--base-100);
|
||||
|
||||
|
|
|
|||
|
|
@ -590,7 +590,7 @@
|
|||
('shadow', 'box-shadow', ('none': none), (), true),
|
||||
('outline', 'outline', ('none': none), (), false),
|
||||
(
|
||||
'',
|
||||
null,
|
||||
'display',
|
||||
(
|
||||
'hidden': none,
|
||||
|
|
@ -602,12 +602,20 @@
|
|||
'grid': grid
|
||||
),
|
||||
(),
|
||||
true
|
||||
true,
|
||||
null
|
||||
),
|
||||
('', 'visibility', ('visible': visible, 'invisible': hidden), (), true),
|
||||
('', 'clear', ('clear': both), (), false),
|
||||
(
|
||||
'',
|
||||
null,
|
||||
'visibility',
|
||||
('visible': visible, 'invisible': hidden),
|
||||
(),
|
||||
true,
|
||||
null
|
||||
),
|
||||
(null, 'clear', ('clear': both), (), false, null),
|
||||
(
|
||||
null,
|
||||
'position',
|
||||
(
|
||||
'static': static,
|
||||
|
|
@ -617,6 +625,7 @@
|
|||
'relative': relative
|
||||
),
|
||||
(),
|
||||
true
|
||||
true,
|
||||
null
|
||||
)
|
||||
);
|
||||
|
|
|
|||
97
app/assets/stylesheets/config/_import.scss
vendored
97
app/assets/stylesheets/config/_import.scss
vendored
|
|
@ -38,6 +38,17 @@ $colors: (
|
|||
'accent-danger-lighter': var(--accent-danger-lighter),
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Sizes. //////////////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// The reason why header height is set here instead of caluclating it based on its
|
||||
// content is because header is sometimes fixed and we need to offset page content
|
||||
// by specific value.. And that's the value.
|
||||
|
||||
$header-height: 56px;
|
||||
$site-width: 1280px;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// [DRAFT] Responsiveness Breakpoints. /////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -48,7 +59,7 @@ $colors: (
|
|||
$breakpoint-s: 640px;
|
||||
$breakpoint-m: 768px;
|
||||
$breakpoint-l: 1024px;
|
||||
$breakpoint-xl: 1280px;
|
||||
$breakpoint-xl: $site-width;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
|
|
@ -59,16 +70,6 @@ $breakpoints: (
|
|||
'xl': $breakpoint-xl,
|
||||
);
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Header height ///////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
//
|
||||
// The reason why header height is set here instead of caluclating it based on its
|
||||
// content is because header is sometimes fixed and we need to offset page content
|
||||
// by specific value.. And that's the value.
|
||||
|
||||
$header-height: 56px;
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
// Spacing Units. //////////////////////////////////////////////////////////////////
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
|
@ -197,6 +198,39 @@ $lh-base: 1.5; // 24px for 16px font-size
|
|||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// replace-nth() - Replace n-th list item with another item
|
||||
//
|
||||
// @param {number} $list List.
|
||||
// @param {number} $index Which item in the list should be replaced.
|
||||
// @param {number} $value New item.
|
||||
|
||||
@function replace-nth($list, $index, $value) {
|
||||
$result: null;
|
||||
|
||||
@if type-of($index) != number {
|
||||
@warn "$index: #{quote($index)} is not a number for `replace-nth`.";
|
||||
} @else if $index == 0 {
|
||||
@warn "List index 0 must be a non-zero integer for `replace-nth`.";
|
||||
} @else if abs($index) > length($list) {
|
||||
@warn "List index is #{$index} but list is only #{length($list)} item long for `replace-nth`.";
|
||||
} @else {
|
||||
$result: ();
|
||||
$index: if($index < 0, length($list) + $index + 1, $index);
|
||||
|
||||
@for $i from 1 through length($list) {
|
||||
@if $i == $index {
|
||||
$result: append($result, $value, comma);
|
||||
} @else {
|
||||
$result: append($result, nth($list, $i), comma);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@return $result;
|
||||
}
|
||||
|
||||
////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
// generate-classes()
|
||||
//
|
||||
// Generating classes for Tailwind approach.
|
||||
|
|
@ -205,18 +239,17 @@ $lh-base: 1.5; // 24px for 16px font-size
|
|||
// @param {string || list} $properties Defines CSS property(ies) that, for example `margin-right`
|
||||
// @param {list} $values-1 List of values for which we gonna generate classes
|
||||
// @param {list} $values-2 Additional list of values, useful when we want to combine two lists.
|
||||
// @param {boolean} $responsive Wheather or not class should be responsive.
|
||||
// @param {string} $separator Separator between prefix and value.
|
||||
|
||||
@mixin generate-classes(
|
||||
$prefix,
|
||||
$properties,
|
||||
$values-1,
|
||||
$values-2: (),
|
||||
$responsive: false
|
||||
$responsive: false,
|
||||
$separator: '-'
|
||||
) {
|
||||
$separator: '-';
|
||||
@if $prefix == '' {
|
||||
$separator: '';
|
||||
}
|
||||
$values: map-merge($values-1, $values-2);
|
||||
@each $name, $value in $values {
|
||||
.#{$prefix}#{$separator}#{$name} {
|
||||
|
|
@ -238,38 +271,20 @@ $lh-base: 1.5; // 24px for 16px font-size
|
|||
|
||||
@mixin initialize-generator($breakpoints, $classes...) {
|
||||
@each $argument in $classes {
|
||||
$prefix: nth($argument, 1);
|
||||
$properties: nth($argument, 2);
|
||||
$values-1: nth($argument, 3);
|
||||
$values-2: nth($argument, 4);
|
||||
$responsive: nth($argument, 5);
|
||||
|
||||
@include generate-classes(
|
||||
$prefix,
|
||||
$properties,
|
||||
$values-1,
|
||||
$values-2,
|
||||
$responsive
|
||||
);
|
||||
@include generate-classes($argument...);
|
||||
}
|
||||
|
||||
@each $breakpoint, $value in $breakpoints {
|
||||
@media (min-width: $value) {
|
||||
@each $argument in $classes {
|
||||
$prefix: $breakpoint + '\\:'+ nth($argument, 1);
|
||||
$properties: nth($argument, 2);
|
||||
$values-1: nth($argument, 3);
|
||||
$values-2: nth($argument, 4);
|
||||
$responsive: nth($argument, 5);
|
||||
|
||||
@if $responsive == true {
|
||||
@include generate-classes(
|
||||
$prefix,
|
||||
$properties,
|
||||
$values-1,
|
||||
$values-2,
|
||||
$responsive
|
||||
);
|
||||
$prefix: $breakpoint + '\\:';
|
||||
@if nth($argument, 1) != null {
|
||||
$prefix: $breakpoint + '\\:'+ nth($argument, 1);
|
||||
}
|
||||
$argument: replace-nth($argument, 1, $prefix);
|
||||
@include generate-classes($argument...);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -162,13 +162,12 @@ body.static-navbar-config {
|
|||
}
|
||||
}
|
||||
|
||||
.pro-visible-block,
|
||||
.trusted-visible-block {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
body.trusted-status-true .trusted-visible-block {
|
||||
display: block !important;
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
body.hidden-shell {
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
@import 'config/import';
|
||||
@import 'variables';
|
||||
|
||||
#audiocontent {
|
||||
position: fixed;
|
||||
bottom: 0px;
|
||||
|
|
@ -189,9 +191,10 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
left: -20%;
|
||||
background: $green;
|
||||
background: var(--accent-brand);
|
||||
box-shadow: 0 -2px $su-1 var(--accent-brand);
|
||||
z-index: 100;
|
||||
height: 43px;
|
||||
height: $su-1;
|
||||
width: 0%;
|
||||
&.showing {
|
||||
display: block;
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
|
||||
// Header
|
||||
--header-bg: var(--base-0);
|
||||
--header-shadow: rgba(0,0,0,0.1);
|
||||
--header-icons-color: #0a0a0a;
|
||||
--header-icons-color-hover: #000;
|
||||
|
||||
|
|
@ -107,7 +108,7 @@
|
|||
// Forms
|
||||
--form-bg: #f4f5f7;
|
||||
--form-bg-focus: var(--base-0);
|
||||
--form-border: ##f4f5f7;
|
||||
--form-border: #f4f5f7;
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
|
||||
// Header
|
||||
--header-bg: var(--base-10);
|
||||
--header-shadow: rgba(0,0,0,0.3);
|
||||
--header-icons-color: rgba(255, 255, 255, 0.8);
|
||||
--header-icons-color-hover: #fff;
|
||||
|
||||
|
|
|
|||
|
|
@ -21,14 +21,14 @@
|
|||
--base-inverted: #fff;
|
||||
|
||||
// Accent colors
|
||||
--accent-brand: #ff4983;
|
||||
--accent-brand-darker: #d70044;
|
||||
--accent-brand-lighter: #fe8eb1;
|
||||
--accent-brand: #ff6c9b;
|
||||
--accent-brand-darker: #f03e76;
|
||||
--accent-brand-lighter: #ff99b9;
|
||||
|
||||
// Success
|
||||
--accent-success: #23d259;
|
||||
--accent-success-darker: #06b23b;
|
||||
--accent-success-lighter: #6cf597;
|
||||
--accent-success: #71DB92;
|
||||
--accent-success-darker: #5ABF79;
|
||||
--accent-success-lighter: #93EDAF;
|
||||
|
||||
// Warning
|
||||
--accent-warning: #ffcf4c;
|
||||
|
|
@ -59,13 +59,14 @@
|
|||
--widget-headline: var(--base-100);
|
||||
|
||||
// Header
|
||||
--header-bg: var(--accent-brand);
|
||||
--header-icons-color: var(--base-inverted);
|
||||
--header-icons-color-hover: #fff;
|
||||
--header-bg: var(--base-40);
|
||||
--header-shadow: transparent;
|
||||
--header-icons-color: var(--base-10);
|
||||
--header-icons-color-hover: var(--base-0);
|
||||
|
||||
// Logo
|
||||
--logo-bg: var(--base-inverted);
|
||||
--logo-color: var(--accent-brand);
|
||||
--logo-color: var(--header-bg);
|
||||
|
||||
// Footer
|
||||
--footer-bg: var(--base-inverted);
|
||||
|
|
@ -90,7 +91,7 @@
|
|||
--button-primary-bg: var(--accent-brand);
|
||||
--button-primary-color: var(--base-0);
|
||||
--button-primary-bg-hover: var(--accent-brand-darker);
|
||||
--button-primary-color-hover: var(--base-0);
|
||||
--button-primary-color-hover: var(--base-inverted);
|
||||
|
||||
// Secondary buttons
|
||||
--button-secondary-bg: var(--base-20);
|
||||
|
|
@ -107,9 +108,9 @@
|
|||
// Forms
|
||||
--form-bg: #fff7f9;
|
||||
--form-bg-focus: var(--base-0);
|
||||
--form-border: var(--base-30);
|
||||
--form-border-hover: var(--base-40);
|
||||
--form-border-focus: var(--accent-brand);
|
||||
--form-border: var(--base-50);
|
||||
--form-border-hover: var(--base-60);
|
||||
--form-border-focus: var(--base-60);
|
||||
--form-placeholder-color: var(--base-60);
|
||||
|
||||
// Form lables
|
||||
|
|
@ -117,6 +118,6 @@
|
|||
--label-secondary: var(--base-90);
|
||||
|
||||
// Default box
|
||||
--box: var(--base-90);
|
||||
--box: var(--container-bg);
|
||||
--box-darker: var(--base-100);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,4 @@
|
|||
@import 'config/import';
|
||||
@import 'variables';
|
||||
@import 'mixins';
|
||||
|
||||
|
|
@ -6,288 +7,161 @@
|
|||
top: 0px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
-webkit-backface-visibility: hidden;
|
||||
z-index: 1000;
|
||||
z-index: 101;
|
||||
height: $header-height;
|
||||
font-size: 16px; // todo: make it global, based on body
|
||||
background: var(--header-bg);
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.2);
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
box-shadow: 0 1px 1px var(--header-shadow);
|
||||
|
||||
&,
|
||||
& * {
|
||||
box-sizing: border-box; // todo: make it global
|
||||
&::after,
|
||||
&::before,
|
||||
& *,
|
||||
& *::after,
|
||||
& *::before {
|
||||
box-sizing: border-box; // todo: make it global when ready
|
||||
}
|
||||
|
||||
nav {
|
||||
&__container {
|
||||
max-width: $max-width;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.pwa-nav-buttons {
|
||||
position: absolute;
|
||||
top: 17px;
|
||||
left: -200px;
|
||||
display: none;
|
||||
button {
|
||||
background: transparent;
|
||||
border: 0px;
|
||||
width: 28px;
|
||||
text-align: center;
|
||||
opacity: 0.75;
|
||||
@include themeable(filter, theme-social-icon-invert, invert(0));
|
||||
img {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 950px) {
|
||||
left: 88px;
|
||||
&.pwa-nav-buttons--showing {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1439px) {
|
||||
left: -88px;
|
||||
}
|
||||
}
|
||||
|
||||
// TODO make it a component in future.
|
||||
.nav-indicator {
|
||||
position: absolute;
|
||||
padding: 4px;
|
||||
border-radius: 3px;
|
||||
font-weight: bold;
|
||||
display: none;
|
||||
color: $white;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
font-size: 0.8em;
|
||||
min-width: 18px;
|
||||
text-align: center;
|
||||
|
||||
&.showing {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&.connect-number {
|
||||
background: $green;
|
||||
}
|
||||
|
||||
&.notifications-number {
|
||||
background: $dark-purple;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar--menu {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&.showing {
|
||||
.top-bar--menu-dropdown,
|
||||
.top-bar--menu-overlay {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.desktop {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.top-bar--menu-dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top-bar--menu-trigger {
|
||||
all: unset;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.top-bar--menu-overlay {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(17, 17, 17, 0.88);
|
||||
top: $header-height;
|
||||
display: none;
|
||||
}
|
||||
.top-bar--menu-dropdown {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: $header-height;
|
||||
padding: 16px;
|
||||
background: var(--header-bg);
|
||||
display: none;
|
||||
width: 100%;
|
||||
border-radius: 0 0 3px 3px;
|
||||
box-shadow: $shadow;
|
||||
|
||||
@media screen and (min-width: 380px) {
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
.header {
|
||||
padding: 3px 10px;
|
||||
border-bottom: 3px solid rgb(241, 244, 246);
|
||||
margin-bottom: 5px;
|
||||
color: rgb(178, 192, 203);
|
||||
}
|
||||
.option {
|
||||
padding: 15px 10px;
|
||||
@media screen and (min-width: 380px) {
|
||||
padding: 6px 10px;
|
||||
}
|
||||
&.prime-option {
|
||||
border-bottom: 3px solid var(--body-color);
|
||||
margin-bottom: 5px;
|
||||
font-size: 1.22em;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
a {
|
||||
color: var(--body-color);
|
||||
}
|
||||
}
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.skip-content-link {
|
||||
.crayons-indicator {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100px);
|
||||
background: black;
|
||||
color: white;
|
||||
z-index: 9999;
|
||||
padding: 13px;
|
||||
cursor: default;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s linear, transform 0.3s linear;
|
||||
|
||||
&:focus {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 22px);
|
||||
transition: opacity 0.3s linear, transform 0.3s linear;
|
||||
}
|
||||
top: $su-1;
|
||||
right: $su-1;
|
||||
box-shadow: 0 0 0 2px var(--header-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// Logo
|
||||
.top-bar--logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
margin-left: 8px;
|
||||
@media screen and (min-width: 950px) {
|
||||
margin-left: 16px;
|
||||
margin-left: $su-2;
|
||||
@media (min-width: $breakpoint-m) {
|
||||
margin-left: $su-4;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 51px;
|
||||
height: 34px;
|
||||
padding: 7px 8px 6px 10px;
|
||||
width: 50px;
|
||||
height: 40px;
|
||||
padding: 0 7px 0 9px; // TODO: we have to fix SVG for logo a little...
|
||||
background: var(--logo-bg);
|
||||
fill: var(--logo-color);
|
||||
border-radius: 3px;
|
||||
border-radius: $br-default;
|
||||
}
|
||||
}
|
||||
|
||||
// Search bar
|
||||
.top-bar--search {
|
||||
display: flex;
|
||||
max-width: 490px;
|
||||
padding: 0 8px;
|
||||
max-width: 420px;
|
||||
flex: 1 auto;
|
||||
margin: 0 $su-2;
|
||||
|
||||
&,
|
||||
& * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar--search-input {
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
padding: 6px 9px 5px;
|
||||
font-size: 16px;
|
||||
background: var(--form-bg);
|
||||
color: var(--body-color);
|
||||
-webkit-appearance: none;
|
||||
border: 1px solid var(--form-border);
|
||||
&:focus {
|
||||
border: 1px solid var(--form-border-focus);
|
||||
@media (min-width: $breakpoint-s) {
|
||||
margin: 0 $su-4;
|
||||
}
|
||||
}
|
||||
|
||||
// Actions on right side...
|
||||
.top-bar--links {
|
||||
.top-bar__links {
|
||||
height: $header-height;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.top-bar--link {
|
||||
.top-bar__link {
|
||||
position: relative;
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
padding: 0 $su-3;
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
fill: var(--header-icons-color);
|
||||
color: var(--header-icons-color);
|
||||
|
||||
&:hover {
|
||||
fill: var(--header-icons-color-hover);
|
||||
color: var(--header-icons-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown under profile picture / hamburger icon
|
||||
.top-bar__menu {
|
||||
height: 100%;
|
||||
|
||||
&__trigger {
|
||||
all: unset;
|
||||
display: flex;
|
||||
height: 100%;
|
||||
padding: 0 $su-2;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
color: var(--header-icons-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--header-icons-color-hover);
|
||||
}
|
||||
}
|
||||
|
||||
&.write {
|
||||
border-radius: 3px;
|
||||
height: auto;
|
||||
margin-right: 8px;
|
||||
padding: 4px 8px;
|
||||
white-space: nowrap;
|
||||
font-size: 0.9em;
|
||||
border: 2px solid var(--button-primary-bg-hover);
|
||||
background: var(--button-primary-bg);
|
||||
color: var(--button-primary-color);
|
||||
display: none;
|
||||
&__dropdown {
|
||||
top: $header-height;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 650px) {
|
||||
display: inline-block;
|
||||
&.showing {
|
||||
.top-bar__menu__dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
&.desktop {
|
||||
&:hover,
|
||||
&:active,
|
||||
&:focus {
|
||||
.top-bar__menu__dropdown {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.top-bar--profile {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
background: $dark-gray;
|
||||
border-radius: 50%;
|
||||
.skip-content-link {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -100px);
|
||||
background: var(--body-color);
|
||||
color: var(--body-color-inverted);
|
||||
z-index: 9999;
|
||||
padding: $su-4;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
border-radius: $br-default;
|
||||
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
&:focus {
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, $header-height/2);
|
||||
}
|
||||
}
|
||||
|
||||
.pwa-nav-buttons {
|
||||
height: 100%;
|
||||
display: none;
|
||||
padding-left: $su-2;
|
||||
button {
|
||||
all: unset;
|
||||
padding: 0 $su-2;
|
||||
color: var(--header-icons-color);
|
||||
|
||||
&:hover {
|
||||
color: var(--header-icons-color-hover);
|
||||
}
|
||||
}
|
||||
@media (min-width: $breakpoint-m) {
|
||||
&.pwa-nav-buttons--showing {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ $tan: #fdf9f3;
|
|||
$bold-blue: #0045ff;
|
||||
|
||||
$max-width: 1250px;
|
||||
$header-height: 46px; // todo: should be calculated automatically based on content
|
||||
$header-height: 56px; // todo: should be calculated automatically based on content
|
||||
|
||||
$helvetica: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica,
|
||||
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@ import { Search } from '../src/components/Search';
|
|||
import 'focus-visible'
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const root = document.getElementById('nav-search-form-root');
|
||||
const root = document.getElementById('top-bar--search');
|
||||
|
||||
render(<Search />, root, root.firstElementChild);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -16,11 +16,11 @@ export const SearchForm = ({
|
|||
>
|
||||
<input name="utf8" type="hidden" value="✓" />
|
||||
<input
|
||||
className="top-bar--search-input"
|
||||
className="top-bar--search-input crayons-textfield"
|
||||
type="text"
|
||||
name="q"
|
||||
id={searchBoxId}
|
||||
placeholder="Search"
|
||||
placeholder="Search..."
|
||||
autoComplete="off"
|
||||
aria-label="search"
|
||||
onKeyDown={onSearch}
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ exports[`<Search /> renders properly 1`] = `
|
|||
<input
|
||||
aria-label="search"
|
||||
autoComplete="off"
|
||||
class="top-bar--search-input"
|
||||
class="top-bar--search-input crayons-textfield"
|
||||
id="nav-search"
|
||||
name="q"
|
||||
onKeyDown={[Function]}
|
||||
placeholder="Search"
|
||||
placeholder="Search..."
|
||||
type="text"
|
||||
value=""
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -15,11 +15,11 @@ exports[`<SearchForm /> renders properly when given search functions and a searc
|
|||
<input
|
||||
aria-label="search"
|
||||
autoComplete="off"
|
||||
class="top-bar--search-input"
|
||||
class="top-bar--search-input crayons-textfield"
|
||||
id="nav-search"
|
||||
name="q"
|
||||
onKeyDown={[MockFunction]}
|
||||
placeholder="Search"
|
||||
placeholder="Search..."
|
||||
type="text"
|
||||
value="hello"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@ class UnopenedChannelNotice extends Component {
|
|||
|
||||
document.getElementById('connect-link').onclick = () => {
|
||||
// Hack, should probably be its own component in future
|
||||
document.getElementById('connect-number').classList.remove('showing');
|
||||
document.getElementById('connect-number').classList.add('hidden');
|
||||
this.setState({ visible: false });
|
||||
};
|
||||
}
|
||||
|
|
@ -42,10 +42,10 @@ class UnopenedChannelNotice extends Component {
|
|||
const number = document.getElementById('connect-number');
|
||||
this.setState({ unopenedChannels });
|
||||
if (unopenedChannels.length > 0) {
|
||||
number.classList.add('showing');
|
||||
number.classList.remove('hidden');
|
||||
number.innerHTML = unopenedChannels.length;
|
||||
} else {
|
||||
number.classList.remove('showing');
|
||||
number.classList.add('hidden');
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -15,9 +15,6 @@
|
|||
<img class="nav-emoji" src="<%= asset_path("emoji/emoji-one-bookmark.png") %>" alt="reading list icon" /> Reading List
|
||||
<span id="reading-list-count"></span>
|
||||
</a>
|
||||
<a class="sidebar-nav-link trusted-visible-block" href="<%= mod_path %>">
|
||||
<img class="nav-emoji" src="<%= asset_path("emoji/emoji-one-sloth.png") %>" alt="moderation icon" /> Moderation
|
||||
</a>
|
||||
<a class="sidebar-nav-link" href="<%= classified_listings_path %>">
|
||||
<img class="nav-emoji" src="<%= asset_path("emoji/emoji-one-clipboard.png") %>" alt="listings icon" /> Listings
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,64 +1,29 @@
|
|||
<div class="top-bar--menu-dropdown">
|
||||
<div class="crayons-dropdown left-2 right-2 s:left-auto p-0 top-bar__menu__dropdown">
|
||||
<% if user_signed_in? %>
|
||||
<div id="user-profile-link-placeholder">
|
||||
<div class="option">
|
||||
...
|
||||
</div>
|
||||
<div id="user-profile-link-placeholder" class="border-0 border-b-1 border-solid border-base-20 p-1">...</div>
|
||||
|
||||
<div class="border-0 border-b-1 border-solid border-base-20 p-1">
|
||||
<a href="/dashboard" class="crayons-nav-block">Dashboard</a>
|
||||
<a href="/new" class="crayons-nav-block">Write a Post</a>
|
||||
<a href="/readinglist" class="crayons-nav-block">Reading List</a>
|
||||
<a href="/settings" class="crayons-nav-block">Settings</a>
|
||||
<a href="/p/information" class="crayons-nav-block" id="second-last-nav-link">Key Links</a>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="/signout_confirm" class="crayons-nav-block" id="last-nav-link">Sign Out</a>
|
||||
</div>
|
||||
<a href="/dashboard">
|
||||
<div class="option">
|
||||
Dashboard
|
||||
</div>
|
||||
</a>
|
||||
<a href="/new">
|
||||
<div class="option">
|
||||
Write a Post
|
||||
</div>
|
||||
</a>
|
||||
<a href="/readinglist">
|
||||
<div class="option">
|
||||
Reading List
|
||||
</div>
|
||||
</a>
|
||||
<a href="/settings">
|
||||
<div class="option">
|
||||
Settings
|
||||
</div>
|
||||
</a>
|
||||
<a href="/p/information" id="second-last-nav-link">
|
||||
<div class="option">
|
||||
Key Links
|
||||
</div>
|
||||
</a>
|
||||
<a href="/signout_confirm" id="last-nav-link">
|
||||
<div class="option">
|
||||
Sign Out
|
||||
</div>
|
||||
</a>
|
||||
<% else %>
|
||||
<a href="/enter" data-no-instant id="first-nav-link">
|
||||
<div class="header">
|
||||
Sign In/Up
|
||||
</div>
|
||||
</a>
|
||||
<% if SiteConfig.auth_allowed?("twitter") %>
|
||||
<a href="/users/auth/twitter?callback_url=<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>/users/auth/twitter/callback" data-no-instant>
|
||||
<div class="option">
|
||||
Via Twitter
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<% if SiteConfig.auth_allowed?("github") %>
|
||||
<a href="/users/auth/github?state=navbar_basic" data-no-instant id="second-last-nav-link">
|
||||
<div class="option">
|
||||
Via GitHub
|
||||
</div>
|
||||
</a>
|
||||
<% end %>
|
||||
<a href="/p/information" id="last-nav-link">
|
||||
<div class="option">
|
||||
All about <%= ApplicationConfig["COMMUNITY_NAME"] %>
|
||||
</div>
|
||||
</a>
|
||||
<div class="border-0 border-b-1 border-solid border-base-20 p-1">
|
||||
<a href="/enter" data-no-instant id="first-nav-link" class="crayons-nav-block fw-medium">Sign In/Up</a>
|
||||
<% if SiteConfig.auth_allowed?("twitter") %>
|
||||
<a href="/users/auth/twitter?callback_url=<%= ApplicationConfig["APP_PROTOCOL"] %><%= ApplicationConfig["APP_DOMAIN"] %>/users/auth/twitter/callback" class="crayons-nav-block pl-5" data-no-instant>Via Twitter</a>
|
||||
<% end %>
|
||||
<% if SiteConfig.auth_allowed?("github") %>
|
||||
<a href="/users/auth/github?state=navbar_basic" class="crayons-nav-block pl-5" data-no-instant id="second-last-nav-link">Via GitHub</a>
|
||||
<% end %>
|
||||
</div>
|
||||
<div class="p-1">
|
||||
<a href="/p/information" class="crayons-nav-block" id="last-nav-link">All about <%= ApplicationConfig["COMMUNITY_NAME"] %></a>
|
||||
</div>
|
||||
<% end %>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,42 +1,56 @@
|
|||
<div class="navigation-progress" id="navigation-progress">
|
||||
</div>
|
||||
<div class="top-bar" id="top-bar">
|
||||
<nav>
|
||||
<header class="top-bar" id="top-bar">
|
||||
<a href="#articles-list" class="skip-content-link">Skip to content</a>
|
||||
<div class="top-bar__container">
|
||||
<a href="/" class="top-bar--logo" aria-label="<%= ApplicationConfig["COMMUNITY_NAME"] %> Home"><%= logo_svg %></a>
|
||||
|
||||
<div id="pwa-nav-buttons" class="pwa-nav-buttons">
|
||||
<button type="button" id="app-back-button"><img src="<%= asset_path("keyboard-left-arrow-button.svg") %>" alt="back icon" /></button>
|
||||
<button type="button" id="app-forward-button"><img src="<%= asset_path("keyboard-right-arrow-button.svg") %>" alt="forward icon" /></button>
|
||||
<button type="button" id="app-refresh-button"><img src="<%= asset_path("refresh-button.svg") %>" alt="refresh icon" /></button>
|
||||
<button type="button" id="app-back-button">
|
||||
<%= inline_svg_tag("keyboard-left-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Back") %>
|
||||
</button>
|
||||
<button type="button" id="app-forward-button">
|
||||
<%= inline_svg_tag("keyboard-right-arrow-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Forward") %>
|
||||
</button>
|
||||
<button type="button" id="app-refresh-button">
|
||||
<%= inline_svg_tag("refresh-button.svg", aria: true, width: 16, height: 16, class: "crayons-icon", title: "Refresh") %>
|
||||
</button>
|
||||
</div>
|
||||
<a href="#articles-list" class="skip-content-link">Skip to content</a>
|
||||
<a href="/" class="top-bar--logo" id="logo-link" aria-label="<%= ApplicationConfig["COMMUNITY_NAME"] %> Home"><%= logo_svg %></a>
|
||||
<div class="top-bar--search js-top-bar-search" id="nav-search-form-root">
|
||||
|
||||
<div class="top-bar--search" id="top-bar--search">
|
||||
<form acceptCharset="UTF-8" method="get" action="/search">
|
||||
<input class="top-bar--search-input" type="text" name="q" id="nav-search" placeholder="Search" autoComplete="off" />
|
||||
<input class="top-bar--search-input crayons-textfield" type="text" name="q" id="nav-search" placeholder="Search..." autoComplete="off" />
|
||||
</form>
|
||||
</div>
|
||||
<div class="top-bar--links">
|
||||
<a href="/new" id="write-link" class="cta top-bar--link write">WRITE A POST</a>
|
||||
<a href="/connect" id="connect-link" class="top-bar--link" aria-label="Connect">
|
||||
<%= inline_svg_tag("connect.svg", aria: true, title: "Connect") %>
|
||||
<span class="connect-number nav-indicator" id="connect-number"></span>
|
||||
|
||||
<div class="top-bar__links">
|
||||
<a href="/new" class="crayons-btn hidden mr-2 s:block">Write a post</a>
|
||||
|
||||
<a class="top-bar__link trusted-visible-block" aria-label="Modeartion" href="<%= mod_path %>">
|
||||
<%= inline_svg_tag("mod.svg", aria: true, class: "crayons-icon", title: "Moderation") %>
|
||||
</a>
|
||||
<a href="/notifications" id="notifications-link" class="top-bar--link" aria-label="Notifications">
|
||||
<%= inline_svg_tag("bell.svg", aria: true, title: "Notifications") %>
|
||||
<span class="notifications-number nav-indicator" id="notifications-number"></span>
|
||||
|
||||
<a href="/connect" id="connect-link" class="top-bar__link" aria-label="Connect">
|
||||
<%= inline_svg_tag("connect.svg", aria: true, class: "crayons-icon", title: "Connect") %>
|
||||
<span class="crayons-indicator crayons-indicator--success hidden" id="connect-number"></span>
|
||||
</a>
|
||||
<div class="navbar-menu-wrapper top-bar--menu" id="navbar-menu-wrapper">
|
||||
<button type="button" class="navigation-butt top-bar--menu-trigger" id="navigation-butt" aria-label="Navigation menu">
|
||||
<a href="/notifications" id="notifications-link" class="top-bar__link" aria-label="Notifications">
|
||||
<%= inline_svg_tag("bell.svg", aria: true, class: "crayons-icon", title: "Notifications") %>
|
||||
<span class="crayons-indicator crayons-indicator--critical hidden" id="notifications-number"></span>
|
||||
</a>
|
||||
|
||||
<div class="top-bar__menu" id="top-bar__menu">
|
||||
<button type="button" class="top-bar__menu__trigger" id="navigation-butt" aria-label="Navigation menu">
|
||||
<% if user_signed_in? %>
|
||||
<span class="top-bar--profile"><img alt="" id="nav-profile-image" /></span>
|
||||
<span class="crayons-avatar crayons-avatar--l"><img class="crayons-avatar__image" alt="" id="nav-profile-image" /></span>
|
||||
<% else %>
|
||||
<%= inline_svg_tag("menu.svg", aria: true, title: "Navigation menu") %>
|
||||
<%= inline_svg_tag("hamburger.svg", aria: true, class: "crayons-icon", title: "Navigation menu") %>
|
||||
<% end %>
|
||||
</button>
|
||||
<div class="top-bar--menu-overlay" id="menubg"></div>
|
||||
<%= render "layouts/nav_menu" %>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
<% if user_signed_in? %>
|
||||
<script async>
|
||||
// Here we have some scripts we want to get working on before
|
||||
|
|
@ -66,17 +80,17 @@
|
|||
if (isNaN(count)) {
|
||||
document
|
||||
.getElementById('notifications-number')
|
||||
.classList.remove('showing');
|
||||
.classList.add('hidden');
|
||||
} else if (count != '0' && count != undefined && count != '') {
|
||||
document.getElementById('notifications-number').innerHTML =
|
||||
xmlhttp.response;
|
||||
document
|
||||
.getElementById('notifications-number')
|
||||
.classList.add('showing');
|
||||
.classList.remove('hidden');
|
||||
} else {
|
||||
document
|
||||
.getElementById('notifications-number')
|
||||
.classList.remove('showing');
|
||||
.classList.add('hidden');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -86,4 +100,4 @@
|
|||
}
|
||||
</script>
|
||||
<% end %>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -593,30 +593,14 @@
|
|||
<div class="body">
|
||||
<h2>Dropdowns</h2>
|
||||
<p>Dropdowns should have position relative to it’s trigger. They can be used for some 2nd level navigations, contextual configurations, etc...</p>
|
||||
<p>Dropdowns should not be bigger than 320px.</p>
|
||||
<p>Dropdown default padding should be dependent on width:</p>
|
||||
<ul>
|
||||
<li><250px: 16px</li>
|
||||
<li>251 - 320px: 24px</li>
|
||||
</ul>
|
||||
<p>If you need to utilize entire dropdown area and you have to get rid of default padding, please use modifier class <code>crayons-dropdown--padding-0</code>.</p>
|
||||
<p>Dropdowns should not be bigger than 320px (unless it's smallest breakpoint, then dropdowns become full width).</p>
|
||||
<p>Dropdown default padding is set to 16px.</p>
|
||||
<p>FYI: Dropdowns use “Box” component as background, with Level 3 elevation.</p>
|
||||
<p>By default dropdowns are hidden with <code>display: none;</code> so keep that in mind if you ever use dropdowns and can't see them :D.</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-dropdown">
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-dropdown crayons-dropdown--l">
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="crayons-dropdown crayons-dropdown--padding-0">
|
||||
<div class="crayons-dropdown inline-block static">
|
||||
Hey, I'm a dropdown content! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi ea voluptates quaerat eos consequuntur temporibus.
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -625,14 +609,6 @@
|
|||
<div class="crayons-dropdown">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-dropdown--l">
|
||||
Hey, ...
|
||||
</div>
|
||||
|
||||
<div class="... crayons-dropdown--padding-0">
|
||||
Hey, ...
|
||||
</div>
|
||||
'.rstrip %></pre>
|
||||
</div>
|
||||
|
||||
|
|
@ -842,6 +818,7 @@
|
|||
<div class="body">
|
||||
<h2>Navigation: Main nav</h2>
|
||||
<p>Used as main nav in left sidebar or dropdowns...</p>
|
||||
<p>This comoponent is being responsive: for resolutions smaller than <code>$breakpoint-s</code> they have some extra padding to make it easier to tap.</p>
|
||||
<p>Can contain icons.</p>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue