Header scss optimisation #3050
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,10 @@ | ||
| /** | ||
| * @copyright Copyright (c) 2017, John Molakvoæ (skjnldsv@protonmail.com) | ||
| * | ||
| * @license GNU AGPL version 3 or any later version | ||
| * | ||
| */ | ||
|
|
||
| /* prevent ugly selection effect on accidental selection */ | ||
|
|
||
| #header, #navigation, #expanddiv { | ||
|
There was a problem hiding this comment. Code-style wise these should be on separate lines, one per selector. |
||
|
|
@@ -25,7 +32,6 @@ | |
| } | ||
|
|
||
| /* HEADERS ------------------------------------------------------------------ */ | ||
| #body-user #header, #body-settings #header, #body-public #header { | ||
|
There was a problem hiding this comment. Same here, separate lines per selector for readability please. :) |
||
| position: fixed; | ||
| top: 0; | ||
|
|
@@ -39,7 +45,6 @@ | |
| } | ||
|
There was a problem hiding this comment. Also if you want to do this in the right way, please don't use "magical" values you should assign variables like this to z-index. There was a problem hiding this comment. Variables will come after @Espina2 |
||
|
|
||
| /* LOGO and APP NAME -------------------------------------------------------- */ | ||
| #nextcloud { | ||
| position: absolute; | ||
| top: 0; | ||
|
|
@@ -88,6 +93,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. In here instead of repeating the code you why you don't use @extend? There was a problem hiding this comment. 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 +138,6 @@ | |
| } | ||
|
|
||
| /* show appname next to logo */ | ||
| .header-appname { | ||
| display: inline-block; | ||
| position: relative; | ||
|
|
@@ -136,26 +150,14 @@ | |
| 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 +172,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 +188,8 @@ | |
| border-bottom-color: rgba(255, 255, 255, 0.97); | ||
| border-width: 10px; | ||
| margin-left: -10px; | ||
| left: 47%; | ||
| } | ||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
@@ -245,7 +219,10 @@ | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=50)'; | ||
| opacity: .5; | ||
| } | ||
| &:hover svg, | ||
| &:focus svg, | ||
| &:hover span, | ||
| &:focus span { | ||
| -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=100)'; | ||
| opacity: 1; | ||
| } | ||
|
|
@@ -256,26 +233,30 @@ | |
| } | ||
| } | ||
| } | ||
| .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; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /* Apps management */ | ||
| #apps-management { | ||
| min-height: initial; | ||
| height: initial; | ||
|
|
@@ -285,23 +266,16 @@ | |
| -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=30)'; | ||
| opacity: .3; | ||
| } | ||
| /* 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 +287,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 +298,6 @@ | |
| box-sizing: border-box; | ||
| } | ||
|
|
||
| #settings { | ||
| float: right; | ||
| color: #ddd; | ||
|
|
@@ -352,6 +310,7 @@ | |
| } | ||
| } | ||
|
|
||
| /* User menu on the right */ | ||
| #expand { | ||
| display: block; | ||
| padding: 7px 30px 6px 10px; | ||
|
|
@@ -374,6 +333,24 @@ | |
| .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 +366,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; | ||
|
|
@@ -410,14 +398,3 @@ | |
| } | ||
| } | ||
| } | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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