Skip to content
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.

Sign up for GitHub

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

Update Profit Share Calculator to g3d styling #93

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Update Profit Share Calculator to g3d styling #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion PROFIT_SHARE_CALCULATOR/app/components/metrics-drawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import Ember from 'ember';

export default Ember.Component.extend({
classNames: ['metrics-drawer', 'px3'],
classNames: ['metrics-drawer'],
classNameBindings: ['open'],
actions: {
setNumeric(label, value) {
Expand Down
79 changes: 54 additions & 25 deletions PROFIT_SHARE_CALCULATOR/app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,43 @@
:root {
--light-gray: #F4F4F4;
--medium-gray: #C8C8C8;
--dark-gray: #3B3B3B;
--dark-navy: #173963;
--text-color: #eddb35;
--background-color: rgb(19, 20, 27);
--card-background: rgb(29, 25, 37);
--card-background-active: rgb(36, 31, 46);
--outline: #474034;
}

::selection {
background: var(--dark-navy); /* WebKit/Blink Browsers */
color: white;
.mt6 {
margin-top: 6rem;
}

.mt7 {
margin-top: 7rem;
}

.mt8 {
margin-top: 8rem;
}
::-moz-selection {
background: var(--dark-navy); /* Gecko Browsers */
color: white;

::selection {
background: #3b3544;
}

[data-ember-action] {
cursor: pointer;
}

.hover-glow {
transition: 120ms ease-in-out;
&:hover { opacity: 0.4; }
&:hover {
box-shadow: 0px 0 9px -1px #ada132f0;
}
}

.hover-fade {
transition: 120ms ease-in-out;
&:hover {
opacity: 0.6;
}
}

.brick {
Expand All @@ -35,9 +55,8 @@
}
&.active {
.inner {
background-color: var(--dark-navy);
border-color: var(--dark-navy);
h3, p { color: white; }
background-color: var(--card-background-active);
box-shadow: 0 0 4px #eddb3546;
}
}
}
Expand Down Expand Up @@ -69,8 +88,8 @@ input.inline {
display: block;
font-size: 1.17em;
font-weight: bold;
color: var(--dark-gray);
font-family: "Atlas Grotesk", sans-serif;
color: var(--text-color);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
outline: none;
background-color: transparent;
border-style: solid;
Expand All @@ -83,6 +102,17 @@ input.inline {
color: var(--dark-navy);
}

input {
background-color: transparent;
color: var(--text-color);
padding: 0.5rem 0;
font-weight: 300;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}

label.metric-input {
text-align: right;
Expand Down Expand Up @@ -113,18 +143,17 @@ label.metric-input {

.metrics-bar-trigger {
cursor: pointer;
font-family: "Atlas Grotesk", sans-serif;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 0.75rem;
font-size: 1rem;
position: fixed;
z-index: 3;
top: 110px;
left: 32px;
background-color: var(--dark-navy);
color: white;
padding: 10px;
top: 100px;
left: 1rem;
background-color: var(--card-background);
padding: 16px 22px;
border-radius: 999px;
box-shadow: 0 0 8px #eddb3570;
}

@import 'global/fonts';
Expand Down
18 changes: 13 additions & 5 deletions PROFIT_SHARE_CALCULATOR/app/styles/components/_metrics-drawer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,25 @@
.metrics-drawer {
z-index: 2;
position: fixed;
background-color: white;
box-shadow: 0 0 15px 1px #2f2f2f;
background-color: var(--background-color);
box-shadow: 0 0 4px #eddb3546;
left: 0;
width: 280px;
max-width: 90%;
width: 100vw;
max-width: 500px;
height: 100%;
padding-top: 150px;
padding-top: 170px;
transform: translateX(-100%);
transition: transform 180ms cubic-bezier(0.455, 0.030, 0.515, 0.955);

&.open {
transform: translateX(0%);
}
}

.metrics-drawer-inner {
padding: 0 1rem;

@media screen and (min-width: 48rem) {
padding: 0 2rem;
}
}
6 changes: 3 additions & 3 deletions PROFIT_SHARE_CALCULATOR/app/styles/components/_nav-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
.nav-bar {
position: fixed;
background-color: white;
color: #eddb35;
width: 100%;
height: 80px;
box-shadow: 0 0 15px 1px #2f2f2f;
height: 110px;
z-index: 3;
background: linear-gradient(0deg, rgba(2, 0, 36, 0) 0%, #1d1126 80%, #1d1126 100%);

.title {
margin-left: auto;
Expand Down
2 changes: 1 addition & 1 deletion PROFIT_SHARE_CALCULATOR/app/styles/global/_colors.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.border-medium-gray {
border: 1px solid var(--medium-gray);
border: 1px solid var(--outline);
}

.bg-dark-navy {
Expand Down
23 changes: 16 additions & 7 deletions PROFIT_SHARE_CALCULATOR/app/styles/global/_elements.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,28 @@
html {
color-scheme: dark !important;
-webkit-font-smoothing: antialiased;
background-color: var(--background-color);
color: var(--text-color);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6, p, label, input {
color: var(--dark-gray);
font-family: "Atlas Grotesk", sans-serif;
&.lighter { font-weight: lighter; }
}
.lighter { font-weight: 400; }

h1 { font-size: 3em; }
a { color: var(--dark-navy); }
a { color: var(--text-color); }
p { &.line-height { line-height: 1.75em; } }

hr {
border-bottom: 0;
border-style: solid;
border-color: var(--medium-gray);
border-color: var(--outline);
box-shadow: 0 0 4px #eddb3546;
}

a {
transition: all 150ms ease-in-out;
}

a:hover {
text-shadow: 0 0 8px var(--text-color);
}
54 changes: 2 additions & 52 deletions PROFIT_SHARE_CALCULATOR/app/styles/global/_fonts.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,58 +1,8 @@
.serif {
font-family: "Austin News Deck", serif;
&.lighter { font-weight: lighter; }
&.lighter { font-weight: 400; }
&.lightest { font-weight: 200; }
}

.caps {
letter-spacing: 0.1em !important;
}

@font-face {
font-family: 'Austin News Deck';
src: url('AustinNewsDeck-Light-Web.eot');
src: local('Austin News Deck'), local('Austin News Deck Light'),
url('/fonts/AustinNewsDeck-Light-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/AustinNewsDeck-Light-Web.woff2') format('woff2'),
url('/fonts/AustinNewsDeck-Light-Web.woff') format('woff'),
url('/fonts/AustinNewsDeck-Light-Web.ttf') format('truetype'),
url('/fonts/AustinNewsDeck-Light-Web.svg#Calibre-Black') format('svg');
font-weight: lighter;
font-style: normal;
}

@font-face {
font-family: 'Austin News Deck';
src: url('AustinNewsDeck-Roman-Web.eot');
src: local('Austin News Deck'), local('Austin News Deck Roman'),
url('/fonts/AustinNewsDeck-Roman-Web.eot?#iefix') format('embedded-opentype'),
url('/fonts/AustinNewsDeck-Roman-Web.woff2') format('woff2'),
url('/fonts/AustinNewsDeck-Roman-Web.woff') format('woff'),
url('/fonts/AustinNewsDeck-Roman-Web.ttf') format('truetype'),
url('/fonts/AustinNewsDeck-Roman-Web.svg#Calibre-Black') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Atlas Grotesk';
src: url('/fonts/AtlasGroteskRegular.eot');
src: url('/fonts/AtlasGroteskRegular.eot') format('embedded-opentype'),
url('/fonts/AtlasGroteskRegular.woff2') format('woff2'),
url('/fonts/AtlasGroteskRegular.woff') format('woff'),
url('/fonts/AtlasGroteskRegular.ttf') format('truetype'),
url('/fonts/AtlasGroteskRegular.svg#AtlasGroteskRegular') format('svg');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Atlas Grotesk';
src: url('/fonts/AtlasGroteskLight.eot');
src: url('/fonts/AtlasGroteskLight.eot') format('embedded-opentype'),
url('/fonts/AtlasGroteskLight.woff2') format('woff2'),
url('/fonts/AtlasGroteskLight.woff') format('woff'),
url('/fonts/AtlasGroteskLight.ttf') format('truetype'),
url('/fonts/AtlasGroteskLight.svg#AtlasGroteskLight') format('svg');
font-weight: lighter;
font-style: normal;
}
12 changes: 6 additions & 6 deletions PROFIT_SHARE_CALCULATOR/app/styles/overrides/_ember-notify.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
.ember-notify-default .ember-notify {
font-family: "Atlas Grotesk", sans-serif;
color: white;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
border: 0;
font-size: 16px;
line-height: 20px;
padding: 18px;
box-shadow: 0 0 4px #eddb3546;

&.success { background-color: var(--dark-navy) }
&.info { background-color: var(--dark-navy) }
&.warning { background-color: var(--dark-navy) }
&.error { background-color: var(--dark-navy) }
&.success { background-color: var(--card-background) }
&.info { background-color: var(--card-background) }
&.warning { background-color: var(--card-background) }
&.error { background-color: var(--card-background) }
}

30 changes: 15 additions & 15 deletions PROFIT_SHARE_CALCULATOR/app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{{nav-bar}}

<div class='metrics-bar-trigger' {{action (route-action 'toggleMetricsDrawerOpenState')}}>
<div class='metrics-bar-trigger hover-glow' {{action (route-action 'toggleMetricsDrawerOpenState')}}>
{{#if metricsDrawerOpen}}
Close
{{else}}
Expand All @@ -26,14 +26,14 @@
</p>

<div class='brick col col-12 sm-col-6 py1 center {{if (eq studio.Modes.MOCK studio.mode) "active"}}'>
<div class='inner p2 border-medium-gray' {{action (route-action 'setMode' studio.Modes.MOCK)}}>
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'setMode' studio.Modes.MOCK)}}>
<h3 class='serif lighter'>Mock Mode</h3>
<p>Play with the calculator to understand how it works!</p>
</div>
</div>

<div class='brick col col-12 sm-col-6 py1 center {{if (eq studio.Modes.REAL studio.mode) "active"}}'>
<div class='inner p2 border-medium-gray' {{action (route-action 'setMode' studio.Modes.REAL)}}>
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'setMode' studio.Modes.REAL)}}>
<h3 class='serif lighter'>Real World Mode</h3>
<p>Actually calculate profit share at the end of the year</p>
</div>
Expand Down Expand Up @@ -67,7 +67,7 @@
</p>
{{#each studio.scenarios as |scenario|}}
<div class='brick col col-12 sm-col-6 py1 center {{if (eq scenario studio.selectedScenario) "active"}}'>
<div class='inner p2 border-medium-gray' {{action (route-action 'applyScenario' scenario)}}>
<div class='inner p2 border-medium-gray hover-glow' {{action (route-action 'applyScenario' scenario)}}>
<h3 class='serif lighter'>{{scenario.title}}</h3>
<p>{{scenario.description}}</p>
</div>
Expand All @@ -90,14 +90,14 @@
{{#each studio.technologists as |technologist|}}
<div class='technologist col col-12'>
<div class='inner py1 clearfix flex'>
<div class='col col-2 flex items-center'>
<div class='col col-2 flex items-center pr1'>
{{#if (eq editing technologist)}}
{{input value=technologist.name class='inline py1'}}
{{else}}
<h3>{{technologist.name}}</h3>
{{/if}}
</div>
<div class='months col col-4 center flex items-center'>
<div class='months col col-4 center flex items-center pr1'>
{{#if (eq editing technologist)}}
<input
value={{technologist.monthsAtSanctu}}
Expand All @@ -109,7 +109,7 @@
<h3>{{technologist.monthsAtSanctu}} Months / PSU</h3>
{{/if}}
</div>
<div class='salary col col-3 sm-col-4 center flex items-center'>
<div class='salary col col-3 sm-col-4 center flex items-center pr1'>
{{#if (eq editing technologist)}}
<input
value={{technologist.salary}}
Expand All @@ -121,19 +121,19 @@
<h3>{{format-money technologist.salary}}</h3>
{{/if}}
</div>
<div class='profit col col-3 sm-col-4 flex items-center'>
<div class='profit col col-3 sm-col-4 flex items-center pr1'>
<h3 class='dark-navy'>{{format-money technologist.profitShare}}</h3>
</div>

<div class='col col-1 caps center xs-hide'>
<div class='col col-1 center xs-hide hover-fade'>
{{#if (eq editing technologist)}}
<h6 {{action (route-action 'stopEditingTeamMember')}}>OK</h6>
<h5 {{action (route-action 'stopEditingTeamMember')}}>OK</h5>
{{else}}
<h6 {{action (route-action 'editTeamMember' technologist)}}>Edit</h6>
<h5 {{action (route-action 'editTeamMember' technologist)}}>Edit</h5>
{{/if}}
</div>
<div class='col col-1 caps right-align xs-hide'>
<h6 {{action (route-action 'removeTeamMember' technologist)}}>Remove</h6>
<div class='col col-1 right-align xs-hide hover-fade'>
<h5 {{action (route-action 'removeTeamMember' technologist)}}>Remove</h5>
</div>
</div>
</div>
Expand All @@ -145,8 +145,8 @@
</div>
{{/each}}
<div class='col col-12 center py1 xs-hide' {{action (route-action 'addTeamMember')}}>
<div class='border-medium-gray inner py1 px3 clearfix center'>
<h3 class='white'>+ Add Team Member</h3>
<div class='border-medium-gray inner py1 px3 clearfix center hover-glow'>
<h3>+ Add Team Member</h3>
</div>
</div>
</div>
Expand Down
Loading