codeninjasllc/codecombat
1
0
Fork 0
mirror of https://github.com/codeninjasllc/codecombat.git synced 2024-12-02 11:58:10 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions
codecombat/app/styles/about.sass

344 lines
7.3 KiB
Sass
Raw Normal View History

Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
@import "app/styles/bootstrap/variables"
@import "app/styles/mixins"
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
@import "app/styles/style-flat-variables"
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
Ready for action, sir!
2014-01-03 13:32:13 -05:00
#about-view
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
overflow: hidden
Ready for action, sir!
2014-01-03 13:32:13 -05:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#nav-container
min-height: 55px
nav
background: $gold
&.affix
z-index: 1
position: fixed
top: 0
width: 100%
ul
margin-top: 5px
padding-left: 0
list-style: none
li
height: 22pt
display: inline-block
Improve responsiveness on fixed nav
2016-02-25 12:25:13 -05:00
margin: 10px 0 0
@media (min-width: $screen-xs-min)
margin: 10px 5px 0
@media (min-width: $screen-sm-min)
margin: 10px 18px 0
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
a
color: white
text-transform: uppercase
text-decoration: none
li.active
.label
padding-left: 0
padding-right: 0
padding-bottom: 0
margin-left: 0.6em
margin-right: 0.6em
border-bottom: 4px solid white
border-radius: 0
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#jumbotron
background-color: $navy
background-image: url("/images/pages/about/codebackground_zoom_compressed.png")
background-size: cover
background-repeat: no-repeat
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
h1
color: white
margin-top: 100px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
h2
color: white
margin-bottom: 100px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
.responsive-side-margins, h3, h4, p
max-width: 460px
margin-left: auto
margin-right: auto
@media (min-width: $screen-sm-min)
max-width: inherit
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
h3
margin-top: 60px
@media (min-width: $screen-sm-min)
margin-top: 150px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#about-container
@media (min-width: $screen-sm-min)
margin-top: 85px
background-color: white
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#mission-text
margin-top: 30px
@media (min-width: $screen-sm-min)
margin-top: 45px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#mission-graphic, #community-graphic
padding: 30px 40px
position: relative
min-height: 320px
@media (min-width: $screen-sm-min)
min-height: 250px
Upgrade from Bootstrap 2 to Bootstrap 3
2014-01-23 21:49:29 -05:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
h2
color: white
width: 50%
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#mission-graphic
margin-top: 30px
@media (min-width: $screen-sm-min)
margin-top: 45px
background: $navy
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
h2
float: right
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
img
position: absolute
bottom: 0
left: 0
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#mission-graphic-filler
background: $navy
height: 100%
width: 2000px
position: absolute
right: 100%
top: 0
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#team
ul
text-align: center
margin-top: 40px
Upgrade from Bootstrap 2 to Bootstrap 3
2014-01-23 21:49:29 -05:00
padding: 0
li
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
width: 200px
height: 230px
list-style: none
display: inline-block
text-align: center
color: black
small
display: block
white-space: nowrap
.img-thumbnail
border-radius: 50%
padding: 0
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
background-color: $burgandy
Replace /about Matt and Nick pics with real photos
2016-08-03 13:17:57 -04:00
// border: 5px solid $gold
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
.avatar
display: none
.headshot
border: 5px solid #fff
.profile-pic:hover .headshot
display: none
.profile-pic:hover .avatar
display: inline
border: 5px solid $gold
Replace /about Matt and Nick pics with real photos
2016-08-03 13:17:57 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
// #community
// margin-top: 100px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#community-row-1
#community-avatars
width: 90%
margin: 20px 5%
#community-row-2
margin-top: 35px
@media (min-width: $screen-sm-min)
margin-top: 70px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#community-graphic
background: $burgandy
img
position: absolute
right: 0
bottom: 0
#community-graphic-filler
background: $burgandy
height: 100%
width: 2000px
position: absolute
left: 100%
top: 0
#story
// margin-top: 150px
font-family: $headline-font
font-variant: normal
#story-graphic-1
max-width: 580px
margin-top: 50px
@media (min-width: $screen-sm-min)
margin-top: 80px
margin-left: auto
margin-right: auto
.media-heading
color: $burgandy
#story-graphic-2
//TODO: Fix left-margin of this
margin-top: 50px
@media (min-width: $screen-sm-min)
margin-top: 80px
margin-left: auto
margin-right: auto
max-width: 390px
.media-heading
color: $forest
#story-graphic-3
margin-top: 50px
@media (min-width: $screen-sm-min)
margin-top: 80px
p
margin-top: 30px
img
margin-top: 20px
#story-bracketed-text
width: 100%
max-width: 640px
margin: 0 auto
.text-h1
display: inline-block
margin: auto 0
color: $navy
width: 80%
vertical-align: bottom
img
margin: auto 0
#left-bracket
width: 10%
display: inline-block
#right-bracket
width: 10%
display: inline-block
#story-languages
margin-top: 50px
#language-icons
display: inline-block
padding-left: auto
padding-right: auto
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#story-graphic-4
margin-left: auto
margin-right: auto
margin-top: 50px
@media (min-width: $screen-sm-min)
margin-top: 150px
p
margin-top: 20px
figure
img
display: block
margin: 0 auto
#jobs
// margin-top: 50px
// @media (min-width: $screen-sm-min)
// margin-top: 100px
#jobs-row
#benefits, .job-listing
margin-top: 65px
border: thin solid $navy
border-radius: 8px
Add parental leave benefits to /about page
2016-04-05 13:14:51 -04:00
padding: 40px
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
width: 370px
height: 420px
margin-left: auto
margin-right: auto
h5
text-align: center
color: inherit
li
padding-bottom: 7px
#benefits
color: white
background: $navy
ul
margin-top: 20px
Update /about page Removing sales positions, adding marketing position Updating benefits list
2016-04-05 09:29:03 -04:00
a.benefits-link
color: white
text-decoration: underline
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
.job-listing
color: $navy
background: white
// centering hack
position: relative
.label
text-transform: uppercase
color: grey
a.job-link
width: 170px
bottom: 45px
// centering hack
position: absolute
left: 50%
margin-left: -85px
p
margin-top: 15px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#files
padding: 30px 0
margin-top: 50px
border: thin solid gray
border-radius: 8px
.label
color: black
display: block
#screenshots
text-align: center
#screenshot-grid
img
display: inline-block
margin: 6.5px
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#downloads-container
position: relative
height: 250px
#downloads
//TODO: How do I center this in small view?
margin: 20px auto 0
width: 260px
ul
width: 260px
margin-top: 10px
margin-bottom: 20px
margin-left: -25px
a
color: black
#download-button
margin: 0 auto
color: $navy
.glyphicon-download-alt
margin-right: 15px
vertical-align: middle
font-size: 1.5em
Add Hover behavior to Team Photos Also reorganized image folders
2016-09-02 13:51:07 -04:00
Add new About page and refactor out flat-style
2016-02-16 12:57:58 -05:00
#screenshot-lightbox
.modal-dialog
width: auto
max-width: 1024px
#location
margin-top: 75px
margin-bottom: 100px
text-align: center
p b
margin-top: 40px
a
color: inherit
text-decoration: underline
iframe
border: 2px solid lightgray
.anchor::before
content: ""
display: block
height: 55px
Refactor and update teacher-dashboard This updates TeacherClassView and ActivateLicensesModal to use the new state-based rendering system, making it much snappier and less clunky feeling, and improving data consistency. Features also included in this: - Hover details for progress dots in TeacherClassView - ActivateLicensesModal has an "All Students" option and better handling when you switch classrooms in the dropdown - Unenrolled/Unassigned students are shown separately in Course Progress and can be enrolled/assigned from there. Add Back to Classes button on demo-request submitted view Delete temporary patch file Show unenrolled students separately in Course Progress (incomplete) Migrate TeacherClassView to use orchestrator-style events, add unassigned students section, replace bootstrap tabs with state-based tabs Convert missed instance variables to be in @state Fix merge errors (in progress) Convert a bunch of stuff to use state and events (removing student needs fixing) Fix up modal interactions, some bugs Switch state to be a Model, sync up course dropdowns Convert student sorting to use state model Add hover tooltips to TeacherClassView Students tab Don't keep tooltip open when you mouse into it Add dateFirstCompleted and Course Progress tooltips Course Overview progress tooltips Refactor ActivateLicensesModal Refactors: Uses state object for view state Passes back the updated users in 'redeem-users' event instead of modifying given collection Features: Add 'All Students' dropdown option Don't forget checked students if you change classroom from dropdown, but only enroll the ones visible when you click "Enroll (n) Students" Separate enrolled students; improve style Rearrange error text Disable enroll-students button when none are selected Remove console.logs Move style-flat variables to another file This prevents .style-flat from being copied in multiple times to the resulting CSS. Show Unarchive button when on the page for an archived class Move text to en.coffee Only sort students on first classroom sync Fix merge error Handle sessions missing completion date in view logic instead of migration script Listen to classroom sync more than once in case it gets unarchived
2016-04-19 16:44:48 -04:00
margin: -55px 0 0 0
Reference in a new issue Copy permalink