Browse Source

Updates easter egg size & position

Fixes settings sidebar hiding
main
Eric Amodio 4 years ago
parent
commit
da44f99dc1
6 changed files with 103 additions and 30 deletions
  1. +8
    -1
      src/webviews/apps/rebase/rebase.html
  2. +22
    -9
      src/webviews/apps/scss/settings.scss
  3. +39
    -13
      src/webviews/apps/scss/snow.scss
  4. +17
    -1
      src/webviews/apps/scss/welcome.scss
  5. +6
    -1
      src/webviews/apps/settings/settings.html
  6. +11
    -5
      src/webviews/apps/welcome/welcome.html

+ 8
- 1
src/webviews/apps/rebase/rebase.html View File

@ -12,7 +12,6 @@
<body class="preload">
<canvas class="snow"></canvas>
<img class="snow__trigger snow__trigger--right" src="#{root}/images/snowman.png" />
<div class="container">
<header>
@ -33,6 +32,14 @@
<button name="disable" class="button button--flat-subtle" data-action="disable" tabindex="-1">
Disable Rebase Editor<span class="shortcut">Will Abort Rebase</span>
</button>
<div class="snow__trigger-container">
<img
class="snow__trigger snow__trigger--centered"
title="Let it snow — Happy Holidays!"
alt="Let it snow — Happy Holidays!"
src="#{root}/images/snowman.png"
/>
</div>
<button name="start" class="button button--flat-primary button--right" data-action="start">
Start Rebase <span class="shortcut">Ctrl+Enter</span>
</button>

+ 22
- 9
src/webviews/apps/scss/settings.scss View File

@ -59,7 +59,7 @@ header {
max-width: 1200px;
min-width: 450px;
@media all and (max-width: 768px) {
@media all and (max-width: 815px) {
grid-gap: 1em 0;
}
}
@ -80,7 +80,7 @@ header {
background-color: var(--color-background);
}
@media all and (max-width: 768px) {
@media all and (max-width: 815px) {
grid-column: span 1;
}
}
@ -196,7 +196,7 @@ header {
background-color: var(--color-background) !important;
margin-right: 0;
@media all and (max-width: 768px) {
@media all and (max-width: 815px) {
margin-right: unset;
}
}
@ -421,7 +421,11 @@ section {
}
.section__hint {
flex: 0 0 auto;
flex: 0 1 auto;
* {
word-break: break-word;
}
color: var(--color-foreground--75);
font-weight: 200;
@ -605,9 +609,9 @@ section {
// align-items: baseline;
// justify-content: space-between;
.setting {
margin-right: 3em;
}
// .setting {
// margin-right: 3em;
// }
}
.settings--fixed {
@ -620,9 +624,10 @@ section {
font-size: 1.3rem;
position: sticky;
top: 0;
margin-right: -10px;
z-index: 2;
@media all and (max-width: 768px) {
@media all and (max-width: 815px) {
display: none;
}
@ -638,7 +643,7 @@ section {
.is-sidebar-hidden {
display: none;
@media all and (max-width: 768px) {
@media all and (max-width: 815px) {
display: initial;
}
}
@ -655,6 +660,10 @@ section {
opacity: 0.5;
text-align: center;
}
.button {
font-size: 0.9rem;
}
}
.sidebar__jump-link {
@ -679,3 +688,7 @@ section {
@import 'utils';
@import 'popup';
@import 'snow';
.sidebar {
top: 12px;
}

+ 39
- 13
src/webviews/apps/scss/snow.scss View File

@ -7,13 +7,9 @@ canvas.snow {
.snow__trigger {
cursor: pointer;
position: fixed;
left: 7px;
top: 7px;
transform: rotate(-7deg);
width: 36px;
z-index: 2147483647;
width: 28px; //36px;
opacity: 0.6;
transform: rotate(-7deg);
transition: filter 250ms, opacity 250ms, transform 250ms;
body:not(.snowing) & {
@ -28,16 +24,46 @@ canvas.snow {
}
}
.snow__trigger--right {
right: 15px;
left: unset;
top: 3px;
.snow__trigger--flipped {
transform: rotate(4deg) scaleX(-1);
&:hover {
filter: unset !important;
opacity: 0.9 !important;
transform: rotate(1deg) scaleX(-1) scale(1.1);
}
}
.snow__trigger--centered {
position: relative;
top: 50%;
transform: translateY(-50%) rotate(-7deg);
&:hover {
transform: translateY(-50%) rotate(-4deg) scale(1.1);
}
&.snow__trigger--flipped {
transform: translateY(-50%) rotate(4deg) scaleX(-1);
&:hover {
transform: translateY(-50%) rotate(1deg) scaleX(-1) scale(1.1);
}
}
}
.snow__trigger--fixed-left {
position: fixed;
left: 3px;
top: 3px;
z-index: 2147483647;
}
.snow__trigger--fixed-right {
position: fixed;
right: 3px;
top: 3px;
z-index: 2147483647;
}
.snow__trigger-container {
margin: 0 0.5em;
}

+ 17
- 1
src/webviews/apps/scss/welcome.scss View File

@ -516,7 +516,7 @@ section {
.sponsor__image {
opacity: 0.8;
transition: opacity 250ms;
width: 118px;
height: 32px;
margin: 0;
&:hover {
@ -524,6 +524,18 @@ section {
}
}
.sponsor__image-link {
margin: 5px;
&:first-of-type {
margin-top: 10px;
}
&:last-of-type {
margin-bottom: -5px;
}
}
.sponsor__tag {
font-size: 1.1rem;
margin: -1em 0.5em 0 0.5em;
@ -552,3 +564,7 @@ section {
@import 'utils';
@import 'snow';
.sidebar {
margin-right: 14px;
}

+ 6
- 1
src/webviews/apps/settings/settings.html View File

@ -157,7 +157,12 @@
<body class="preload">
<canvas class="snow"></canvas>
<img class="snow__trigger" src="#{root}/images/snowman.png" />
<img
class="snow__trigger snow__trigger--fixed-right snow__trigger--flipped"
title="Let it snow — Happy Holidays!"
alt="Let it snow — Happy Holidays!"
src="#{root}/images/snowman.png"
/>
<div class="container">
<header>

+ 11
- 5
src/webviews/apps/welcome/welcome.html View File

@ -12,7 +12,12 @@
<body class="preload">
<canvas class="snow"></canvas>
<img class="snow__trigger" src="#{root}/images/snowman.png" />
<img
class="snow__trigger snow__trigger--fixed-right snow__trigger--flipped"
title="Let it snow — Happy Holidays!"
alt="Let it snow — Happy Holidays!"
src="#{root}/images/snowman.png"
/>
<div class="container">
<header>
@ -410,21 +415,22 @@
<div class="sidebar__group sidebar__group--sponsors">
<h2>Sponsors</h2>
<a
class="sponsor__image-link"
title="Try CodeStream &mdash; Pull Requests and Code Reviews in your IDE"
href="https://sponsorlink.codestream.com/?utm_source=gitlens_welcome&utm_medium=banner&utm_campaign=gitlens"
>
<img
class="sponsor__image light"
src="https://alt-images.codestream.com/codestream_logo_gitlens_welcome_dark.png"
src="https://alt-images.codestream.com/codestream_logo_gitlens_web_dark.png"
alt="CodeStream Logo &mdash; Pull Requests and Code Reviews in your IDE"
/>
<img
class="sponsor__image dark"
src="https://alt-images.codestream.com/codestream_logo_gitlens_welcome_light.png"
src="https://alt-images.codestream.com/codestream_logo_gitlens_web_light.png"
alt="CodeStream Logo &mdash; Pull Requests and Code Reviews in your IDE"
/>
</a>
<a title="Visit Embark Studios" href="https://embark-studios.com">
<a class="sponsor__image-link" title="Visit Embark Studios" href="https://embark-studios.com">
<img
class="sponsor__image light"
src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/sponsors/embark-studios_dark.png"
@ -436,7 +442,7 @@
alt="Embark Studios Logo"
/>
</a>
<a title="Visit Localize" href="https://localizejs.com">
<a class="sponsor__image-link" title="Visit Localize" href="https://localizejs.com">
<img
class="sponsor__image light"
src="https://raw.githubusercontent.com/eamodio/vscode-gitlens/main/images/docs/sponsors/localize_dark.png"

Loading…
Cancel
Save