-
-
Notifications
You must be signed in to change notification settings - Fork 4k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Header scss optimisation #3050
Header scss optimisation #3050
Changes from all commits
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,13 +1,23 @@ | ||
/* prevent ugly selection effect on accidental selection */ | ||
/** | ||
* @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com) | ||
* @copyright Copyright (c) 2016, Lukas Reschke (lukas@statuscode.ch) | ||
* @copyright Copyright (c) 2016, Julius Härtl (jus@bitgrid.net) | ||
* @copyright Copyright (c) 2016, Jos Poortvliet (jospoortvliet@gmail.com) | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @skjnldsv I wrote the original file in 2014, that’s what I meant ;) There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I created a script to output the original copyrights from the commits. |
||
* | ||
* @license GNU AGPL version 3 or any later version | ||
* | ||
*/ | ||
|
||
#header, #navigation, #expanddiv { | ||
/* prevent ugly selection effect on accidental selection */ | ||
#header, | ||
#navigation, | ||
#expanddiv { | ||
-webkit-user-select: none; | ||
-moz-user-select: none; | ||
-ms-user-select: none; | ||
} | ||
|
||
/* removed until content-focusing issue is fixed */ | ||
|
||
#skip-to-content a { | ||
position: absolute; | ||
left: -10000px; | ||
|
@@ -25,8 +35,9 @@ | |
} | ||
|
||
/* HEADERS ------------------------------------------------------------------ */ | ||
|
||
#body-user #header, #body-settings #header, #body-public #header { | ||
#body-user #header, | ||
#body-settings #header, | ||
#body-public #header { | ||
position: fixed; | ||
top: 0; | ||
left: 0; | ||
|
@@ -39,7 +50,6 @@ | |
} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Variables will come after @Espina2 |
||
|
||
/* LOGO and APP NAME -------------------------------------------------------- */ | ||
|
||
#nextcloud { | ||
position: absolute; | ||
top: 0; | ||
|
@@ -88,6 +98,16 @@ | |
padding-top: 18px; | ||
padding-right: 10px; | ||
} | ||
/* show caret indicator next to logo to make clear it is tappable */ | ||
.icon-caret { | ||
display: inline-block; | ||
width: 12px; | ||
height: 12px; | ||
margin: 0; | ||
margin-top: -21px; | ||
padding: 0; | ||
vertical-align: middle; | ||
} | ||
} | ||
|
||
/* hover effect for app switcher label */ | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. In here instead of repeating the code you why you don't use @extend? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. What do you wish to extend exactly? There isn't that much similarity. And extend is great amongst similar properties, but since we generate the css, we need to aim for a balance between readability and optimisation. |
||
|
@@ -123,7 +143,6 @@ | |
} | ||
|
||
/* show appname next to logo */ | ||
|
||
.header-appname { | ||
display: inline-block; | ||
position: relative; | ||
|
@@ -136,26 +155,14 @@ | |
vertical-align: middle; | ||
} | ||
|
||
/* show caret indicator next to logo to make clear it is tappable */ | ||
|
||
#header .icon-caret { | ||
display: inline-block; | ||
width: 12px; | ||
height: 12px; | ||
margin: 0; | ||
margin-top: -21px; | ||
padding: 0; | ||
vertical-align: middle; | ||
} | ||
|
||
/* do not show menu toggle on public share links as there is no menu */ | ||
|
||
#body-public #header .icon-caret { | ||
display: none; | ||
} | ||
|
||
/* NAVIGATION --------------------------------------------------------------- */ | ||
|
||
#navigation { | ||
position: fixed; | ||
top: 45px; | ||
|
@@ -170,6 +177,7 @@ | |
border-top-left-radius: 0; | ||
border-top-right-radius: 0; | ||
display: none; | ||
box-sizing: border-box; | ||
/*overflow-y: auto; | ||
overflow-x: hidden;*/ | ||
z-index: 2000; | ||
|
@@ -185,37 +193,8 @@ | |
border-bottom-color: rgba(255, 255, 255, 0.97); | ||
border-width: 10px; | ||
margin-left: -10px; | ||
left: 47%; | ||
} | ||
} | ||
|
||
/* arrow look */ | ||
|
||
#expanddiv:after { | ||
bottom: 100%; | ||
border: solid transparent; | ||
content: ' '; | ||
height: 0; | ||
width: 0; | ||
position: absolute; | ||
pointer-events: none; | ||
border-color: rgba(0, 0, 0, 0); | ||
border-bottom-color: rgba(255, 255, 255, 0.97); | ||
border-width: 10px; | ||
margin-left: -10px; | ||
} | ||
|
||
/* position of dropdown arrow */ | ||
|
||
#navigation:after { | ||
left: 47%; | ||
} | ||
|
||
#expanddiv:after { | ||
right: 15px; | ||
} | ||
|
||
#navigation { | ||
box-sizing: border-box; | ||
* { | ||
box-sizing: border-box; | ||
} | ||
|
@@ -241,11 +220,15 @@ | |
overflow: hidden; | ||
text-overflow: ellipsis; | ||
} | ||
svg, span { | ||
svg, | ||
span { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; | ||
opacity: .5; | ||
} | ||
&:hover svg, &:focus svg, &:hover span, &:focus span { | ||
&:hover svg, | ||
&:focus svg, | ||
&:hover span, | ||
&:focus span { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
opacity: 1; | ||
} | ||
|
@@ -256,52 +239,50 @@ | |
} | ||
} | ||
} | ||
} | ||
|
||
/* icon opacity and hover effect */ | ||
|
||
#apps-management a { | ||
&:hover svg, &:focus svg, &.active svg, &:hover span, &:focus span, &.active span { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
opacity: 1; | ||
.app-icon { | ||
margin: 0 auto; | ||
padding: 0; | ||
max-height: 32px; | ||
max-width: 32px; | ||
} | ||
/* loading feedback for apps */ | ||
.app-loading { | ||
.icon-loading-dark { | ||
display: inline !important; | ||
position: absolute; | ||
top: 20px; | ||
left: 24px; | ||
width: 32px; | ||
height: 32px; | ||
} | ||
.app-icon { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; | ||
opacity: 0; | ||
} | ||
} | ||
} | ||
|
||
#navigation .app-icon { | ||
margin: 0 auto; | ||
padding: 0; | ||
max-height: 32px; | ||
max-width: 32px; | ||
} | ||
|
||
/* Apps management */ | ||
|
||
#apps-management { | ||
min-height: initial; | ||
height: initial; | ||
margin: 0; | ||
a { | ||
svg, span { | ||
svg, | ||
span { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; | ||
opacity: .3; | ||
} | ||
} | ||
} | ||
|
||
/* loading feedback for apps */ | ||
|
||
#navigation .app-loading { | ||
.icon-loading-dark { | ||
display: inline !important; | ||
position: absolute; | ||
top: 20px; | ||
left: 24px; | ||
width: 32px; | ||
height: 32px; | ||
} | ||
.app-icon { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=0)'; | ||
opacity: 0; | ||
/* icon opacity and hover effect */ | ||
&:hover svg, | ||
&:focus svg, | ||
&.active svg, | ||
&:hover span, | ||
&:focus span, | ||
&.active span { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
opacity: 1; | ||
} | ||
} | ||
} | ||
|
||
|
@@ -313,7 +294,6 @@ | |
/* USER MENU -----------------------------------------------------------------*/ | ||
|
||
/* info part on the right, used e.g. for info on who shared something */ | ||
|
||
.header-right { | ||
position: absolute; | ||
right: 0; | ||
|
@@ -325,21 +305,6 @@ | |
box-sizing: border-box; | ||
} | ||
|
||
/* Profile picture in header */ | ||
|
||
#header .avatardiv { | ||
float: left; | ||
display: inline-block; | ||
margin-right: 8px; | ||
cursor: pointer; | ||
height: 32px; | ||
width: 32px; | ||
img { | ||
opacity: 1; | ||
cursor: pointer; | ||
} | ||
} | ||
|
||
#settings { | ||
float: right; | ||
color: #ddd; | ||
|
@@ -352,28 +317,49 @@ | |
} | ||
} | ||
|
||
/* User menu on the right */ | ||
#expand { | ||
display: block; | ||
padding: 7px 30px 6px 10px; | ||
cursor: pointer; | ||
* { | ||
cursor: pointer; | ||
} | ||
&:hover, &:focus, &:active { | ||
color: #fff; | ||
} | ||
img { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=70)'; | ||
opacity: .7; | ||
margin-bottom: -2px; | ||
} | ||
&:hover img, &:focus img, &:active img { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
opacity: 1; | ||
&:hover, | ||
&:focus, | ||
&:active { | ||
color: #fff; | ||
img { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
opacity: 1; | ||
} | ||
} | ||
.icon-caret { | ||
margin-top: 0; | ||
} | ||
|
||
/* Profile picture in header */ | ||
.avatardiv { | ||
float: left; | ||
display: inline-block; | ||
margin-right: 8px; | ||
cursor: pointer; | ||
height: 32px; | ||
width: 32px; | ||
img { | ||
opacity: 1; | ||
cursor: pointer; | ||
} | ||
/* do not show display name when profile picture is present */ | ||
&.avatardiv-shown + #expandDisplayName { | ||
display: none; | ||
} | ||
} | ||
} | ||
|
||
#expanddiv { | ||
|
@@ -389,8 +375,19 @@ | |
border-top-right-radius: 0; | ||
box-sizing: border-box; | ||
&:after { | ||
/* position of dropdown arrow */ | ||
right: 15px; | ||
border-color: rgba(0, 0, 0, 0); | ||
border-bottom-color: rgba(255, 255, 255, 1); | ||
bottom: 100%; | ||
border: solid transparent; | ||
content: ' '; | ||
height: 0; | ||
width: 0; | ||
position: absolute; | ||
pointer-events: none; | ||
border-width: 10px; | ||
margin-left: -10px; | ||
} | ||
a { | ||
display: block; | ||
|
@@ -404,20 +401,12 @@ | |
margin-bottom: -3px; | ||
margin-right: 6px; | ||
} | ||
&:hover, &:focus, &:active, &.active { | ||
&:hover, | ||
&:focus, | ||
&:active, | ||
&.active { | ||
-ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
opacity: 1; | ||
} | ||
} | ||
} | ||
|
||
/* do not show display name when profile picture is present */ | ||
|
||
#header { | ||
.avatardiv.avatardiv-shown + #expandDisplayName { | ||
display: none; | ||
} | ||
#expand { | ||
display: block; | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We also need to include the original authors of the original file ;)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I included the most active ones.
There is 16, should I include all of them? Or should we remove the copyright header entirely?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
it's not about most active ones: it's about actual contributors to this file