+
+
+
+
+
+
{{#link-to "main"}}Home{{/link-to}}
+
-
-
-
+
+ {{yield}}
+
- {{yield}}
+
-
-
diff --git a/assets/styles/app/_mixins/vars.sass b/assets/styles/app/_mixins/vars.sass
index 552368aa..34f63469 100644
--- a/assets/styles/app/_mixins/vars.sass
+++ b/assets/styles/app/_mixins/vars.sass
@@ -1,7 +1,9 @@
+$blue-grey: #404650
+
$logo-red: #dc4136
-$topbar-bg: #404650
+$topbar-bg: $blue-grey
$topbar-bg-darker: #31363d
$main-repo-link-color: #50555b
@@ -10,4 +12,20 @@ $main-repo-hover-color: #607a84
$travis-lint-color: #9b9d9e
$travis-lint-bg: #fafafa
-$left-bg: #e9e9e7
\ No newline at end of file
+$left-bg: #e9e9e7
+
+// dashboard
+$pass-color: #3ba85d
+$fail-color: #d04729
+$error-color: #999999
+$start-color: #848032
+$start-bg-color: #D2CA24
+
+//wrapper
+$wrapper-bg-color: #f4f3ea
+
+// footer
+$footer-color: $blue-grey
+$footer-bg-color: #e0e0e0
+$footer-h3-color: #8f9ba2
+$footer-h3-corder-color: #ccd0d5
\ No newline at end of file
diff --git a/assets/styles/app/components/loader.sass b/assets/styles/app/components/loader.sass
new file mode 100644
index 00000000..c91719b4
--- /dev/null
+++ b/assets/styles/app/components/loader.sass
@@ -0,0 +1,89 @@
+
+
+#loader-container-large
+ margin-top: 2em
+ height : 70px
+ text-align : center
+
+#loader-container-large .load-text
+ font-size : 25px
+ line-height : 30px
+ font-weight : 300
+ margin-top : 20px
+ font-weight: 400
+
+.loader-large
+ width : 60px
+ height : 60px
+ position : relative
+ margin : 0 auto
+
+#loader-container-medium
+ height : 40px
+ margin-top : 15px
+ text-align : center
+
+#loader-container-medium .load-text
+ vertical-align : 10px
+ display : inline-block
+
+.loader-medium
+ width : 30px
+ height : 30px
+ position : relative
+ display : inline-block
+ margin : 0 auto
+ margin-right : 10px
+
+#loader-container-small
+ height : 20px
+ margin-top : 22px
+ text-align : center
+
+#loader-container-small .load-text
+ vertical-align : 3px
+ display : inline-block
+
+.loader-small
+ width : 15px
+ height : 15px
+ position : relative
+ display : inline-block
+ margin : 0 auto
+ margin-right : 5px
+
+.load-circle1, .load-circle2
+ width : 100%
+ height : 100%
+ border-radius : 50%
+ opacity : 0.7
+ position : absolute
+ top : 0
+ left : 0
+ -webkit-animation : bounce 1.5s infinite ease-in-out
+ animation : bounce 1.5s infinite ease-in-out
+
+.load-circle1
+ background-color : #347389
+
+.load-circle2
+ background-color : #bdc5c5
+ -webkit-animation-delay : -0.5s
+ animation-delay : -0.5s
+
+@-webkit-keyframes bounce
+ 0%, 100%
+ -webkit-transform : scale(0.0)
+
+ 60%
+ -webkit-transform : scale(1.0)
+
+
+@keyframes bounce
+ 0%, 100%
+ transform : scale(0.0)
+ -webkit-transform : scale(0.0)
+ 60%
+ transform: scale(1.0)
+ -webkit-transform : scale(1.0)
+
diff --git a/assets/styles/app/components/travis-switch.sass b/assets/styles/app/components/travis-switch.sass
index c93ddc64..0ca98cdf 100644
--- a/assets/styles/app/components/travis-switch.sass
+++ b/assets/styles/app/components/travis-switch.sass
@@ -1,6 +1,11 @@
.settings-row
margin-top: 20px
+.settings-row,
+.short-settings-element
+ & > *
+ box-sizing: content-box
+
a.travis-switch
margin: 0 10px 0 0
@@ -26,8 +31,8 @@ p.settings-row
&:before
content: ""
position: absolute
- top: 1px
- left: 1px
+ top: 2px
+ left: 2px
width: 3.5em
height: 1.9em
background: #e9e9e7
diff --git a/assets/styles/app/layout.sass b/assets/styles/app/layout.sass
index 3c444de4..6af179d9 100644
--- a/assets/styles/app/layout.sass
+++ b/assets/styles/app/layout.sass
@@ -1,40 +1,13 @@
@import "app/_mixins/all"
-$left-width: 250px
-// @mixin display-flex
-// display: -webkit-flex
-// display: -moz-flex
-// display: -ms-flexbox
-// display: flex
-
-// @mixin flex($grow, $shrink, $size)
-// -ms-flex: $grow $shrink $size
-// -webkit-flex: $grow $shrink $size
-// -moz-flex: $grow $shrink $size
-// flex: $grow $shrink $size
-
-// html, body
-// min-height: 100vh
-
-// body > div:first-child
-// min-height: 100vh
+.centered .row
+ max-width: 1024px
.main, .profile-view
position: relative
width: 100%
min-height: 100vh
- // margin-top: 40px
- //@include display-flex
-
-// #top
-// position: absolute
-// top: -40px
-// left: 0
-// width: 100%
-// min-width: 930px
-// height: 55px
-// z-index: 1000
#auth, #not-found, #simple
#top
@@ -47,7 +20,6 @@ $left-width: 250px
#left, #right
position: relative
min-height: 100%
- //@include flex(0, 0, 25em)
#left
float: left
@@ -55,14 +27,6 @@ $left-width: 250px
background-color: #fbfbfa
border-right: 1px solid $color-border-normal
-@media #{$medium-up}
- #left
- width: grid-calc(8, 24)
-@media #{$large-up}
- #left
- width: grid-calc(5, 24)
- max-width: 300px
-
.duration_label
display: inline-block
height: 11px
@@ -78,13 +42,27 @@ $left-width: 250px
padding: 20px 30px 80px
@media #{$medium-up}
- #main
- width: grid-calc(16, 24)
+ #left
+ width: grid-calc(3, 12)
+ float: left
+ #right
+ width: grid-calc(2, 12)
float: right
-@media #{$medium-up}
+ // #main
+ // width: grid-calc(16, 12)
+ // float: right
#main
- width: grid-calc(19, 24)
- float: right
+ width: grid-calc(7, 12)
+ float: left
+
+
+@media #{$large-up}
+ // #left
+ // width: grid-calc(5, 24)
+ // max-width: 300px
+ // #main
+ // width: grid-calc(19, 24)
+ // float: right
.travis-lint
background-color: $travis-lint-bg
diff --git a/assets/styles/app/layouts/dashboard.sass b/assets/styles/app/layouts/dashboard.sass
index 3bdc28e9..4b8cef5f 100644
--- a/assets/styles/app/layouts/dashboard.sass
+++ b/assets/styles/app/layouts/dashboard.sass
@@ -1,3 +1,9 @@
+/*
+ * Dashboard
+ * @todo: split into components: filter, search, tiles
+ */
+
+@import "app/_mixins/all"
.current-org-avatar
display : inline-block
@@ -7,7 +13,7 @@
margin : -5px 5px 0 0
#filters-search
- background : #ffffff
+ background : $white
font-size : 14px
padding : 5px 0 5px 0
max-height : 44px
@@ -24,7 +30,7 @@
z-index : 1000
#filters ul li
- background : #fff
+ background : $white
position : relative
display : inline-block
padding : 10px 0 10px 0
@@ -32,8 +38,6 @@
margin-top : 0
cursor : pointer
border-radius : 0px
- -webkit-border-radius : 0px
- -moz-border-radius : 0px
#filters li.filters-start:hover
background-color : #fff
@@ -48,8 +52,6 @@
opacity : 0
visibility : hidden
box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
- -webkit-box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
- -moz-box-shadow : 2px 1px 4px 0px rgba(148,145,138,0.4)
#filters ul li ul li
display : block
@@ -70,29 +72,27 @@
height : 20px
margin-right : 5px
text-indent : -9999px
- border-radius : 100px
- -webkit-border-radius : 100px
- -moz-border-radius : 100px
+ border-radius : 100px
-.org-travisci
- background : url('/images/dashboard/orgs-travisci.png') no-repeat
- background-size : contain
+// .org-travisci
+// background : url('/images/dashboard/orgs-travisci.png') no-repeat
+// background-size : contain
-.org-saltinejustine
- background : url('/images/dashboard/orgs-saltinejustine.png') no-repeat
- background-size : contain
+// .org-saltinejustine
+// background : url('/images/dashboard/orgs-saltinejustine.png') no-repeat
+// background-size : contain
-.org-openkarma
- background : url('/images/dashboard/orgs-openkarma.png') no-repeat
- background-size : contain
+// .org-openkarma
+// background : url('/images/dashboard/orgs-openkarma.png') no-repeat
+// background-size : contain
-.org-eurucamp
- background : url('/images/dashboard/orgs-eurucamp.png') no-repeat
- background-size : contain
+// .org-eurucamp
+// background : url('/images/dashboard/orgs-eurucamp.png') no-repeat
+// background-size : contain
#filters ul li ul li:hover
background : #5e869a
- color : #ffffff
+ color : $white
#filters ul li:hover ul
display : block
@@ -111,7 +111,7 @@
z-index : 1000
#views ul li
- background : #fff
+ background : $white
position : relative
display : inline-block
padding : 10px 0 10px 0
@@ -151,7 +151,7 @@
#views ul li ul li:hover
background : #5e869a
- color : #ffffff
+ color : $white
#views ul li:hover ul
display : block
@@ -204,15 +204,13 @@
padding : 30px 0 10px 0
.tile
- background : #fff
+ background : $white
min-height : 125px
color : #9d9fa1
font-size : 14px
margin-bottom : 20px
padding : 0 10px 0 0
border-radius : 4px
- -webkit-border-radius : 4px
- -moz-border-radius : 4px
.duration
background-image: url('/images/dashboard/time.svg')
@@ -225,8 +223,6 @@
background-repeat: no-repeat
background-position: 0 1px
-
-
.finished
background-image: url('/images/dashboard/cal.svg')
background-size : 11px 11px
@@ -239,7 +235,7 @@
margin-bottom: 0
.build-bar
- position : absolute
+ position: absolute
background:
repeat: no-repeat
position: 7px 10px
@@ -261,53 +257,43 @@
.passed
.build-bar
background:
- color: #3ba85d
+ color: $pass-color
image: url('/images/dashboard/status-passed.svg')
-
-
.org,
.repo a,
.build-status a
- color: #3ba85d
-
+ color: $pass-color
.failed
.build-bar
background:
- color: #d04729
+ color: $fail-color
image: url('/images/dashboard/status-failed.svg')
-
-
.org,
.repo a,
.build-status a
- color: #d04729
-
+ color: $fail-color
.started
.build-bar
background:
- color: #D2CA24
+ color: $start-bg-color
image: url('/images/dashboard/status-pending.svg')
-
-
.org,
.repo a,
.build-status a
- color: #848032
+ color: $start-color
.errored
.build-bar
background:
- color: #999999
+ color: $error-color
image: url('/images/dashboard/status-errored.svg')
-
-
.org,
.repo a,
.build-status a
- color: #999999
+ color: $error-color
.tile .build-information
@@ -326,8 +312,6 @@
line-height : 20px
text-overflow : ellipsis
-
-
.tile .star-feature
position : absolute
top : 0
@@ -344,180 +328,19 @@
margin-left : 5px
text-indent : -9999px
-footer
- padding : 20px 0
- background-color : #e0e0e0
- min-height : 334px
- font-size : 12px
- line-height : 22px
- margin-top : -334px /* sticky footer */
-
-.wrapper
- padding-bottom: 334px
- min-height: 100%
- height: auto
- background-color: #f4f3ea
-@media (min-width: 640px)
- .wrapper
- padding-bottom: 204px
-
- footer
- margin-top: -204px
- min-height: 204px
-
-
-footer h3
- font-size : 15px
- margin : 0 0 10px 0
- padding-top : 6px
- font-weight : 400
- color : #8f9ba2
- border-top : solid 4px #ccd0d5
-
-footer .row p
- display : inline-block
- margin : 0
-
-footer .row ul,
-footer .row li
- display : block
- color : #404650
- line-height : 22px
- padding : 0
- margin-top : 0
- list-style-type : none
-
-footer a
- text-decoration : none
- display : inline-block
- color : #404650
-
-footer a:hover,
-footer a:active
- text-decoration : underline
-
-a
- text-decoration : none
- display : block
- color : #404650
-
-.status-circle
- background : #3ba85d
- display : inline-block
- height : 11px
- width : 11px
- text-indent : -9999px
- margin-right : 5px
- border-radius : 100px
- -webkit-border-radius : 100px
- -moz-border-radius : 100px
- vertical-align: middle
@media only screen and (min-width: 64.063em)
#top img
margin : -7px 0 0 10px
-
@media only screen and (min-width: 640px)
#top #status li
display : inline-block
-
#user p
display : inline-block
-
#search
float : right
-
-
-
-#loader-container-large
- margin-top: 2em
- height : 70px
- text-align : center
-
-#loader-container-large .load-text
- font-size : 25px
- line-height : 30px
- font-weight : 300
- margin-top : 20px
- font-weight: 400
-
-.loader-large
- width : 60px
- height : 60px
- position : relative
- margin : 0 auto
-
-#loader-container-medium
- height : 40px
- margin-top : 15px
- text-align : center
-
-#loader-container-medium .load-text
- vertical-align : 10px
- display : inline-block
-
-.loader-medium
- width : 30px
- height : 30px
- position : relative
- display : inline-block
- margin : 0 auto
- margin-right : 10px
-
-#loader-container-small
- height : 20px
- margin-top : 22px
- text-align : center
-
-#loader-container-small .load-text
- vertical-align : 3px
- display : inline-block
-
-.loader-small
- width : 15px
- height : 15px
- position : relative
- display : inline-block
- margin : 0 auto
- margin-right : 5px
-
-.load-circle1, .load-circle2
- width : 100%
- height : 100%
- border-radius : 50%
- opacity : 0.7
- position : absolute
- top : 0
- left : 0
- -webkit-animation : bounce 1.5s infinite ease-in-out
- animation : bounce 1.5s infinite ease-in-out
-
-.load-circle1
- background-color : #347389
-
-.load-circle2
- background-color : #bdc5c5
- -webkit-animation-delay : -0.5s
- animation-delay : -0.5s
-
-@-webkit-keyframes bounce
- 0%, 100%
- -webkit-transform : scale(0.0)
-
- 60%
- -webkit-transform : scale(1.0)
-
-
-@keyframes bounce
- 0%, 100%
- transform : scale(0.0)
- -webkit-transform : scale(0.0)
- 60%
- transform: scale(1.0)
- -webkit-transform : scale(1.0)
-
diff --git a/assets/styles/app/layouts/footer.sass b/assets/styles/app/layouts/footer.sass
new file mode 100644
index 00000000..bc30331d
--- /dev/null
+++ b/assets/styles/app/layouts/footer.sass
@@ -0,0 +1,72 @@
+/*
+ * Footer on the dashboard
+ */
+
+footer
+ padding : 20px 0
+ background-color : $footer-bg-color
+ min-height : 334px
+ font-size : 12px
+ line-height : 22px
+ margin-top : -334px /* sticky footer */
+
+.wrapper
+ padding-bottom: 334px
+ min-height: 100%
+ height: auto
+ background-color: $wrapper-bg-color
+@media (min-width: 640px)
+ .wrapper
+ padding-bottom: 204px
+
+ footer
+ margin-top: -204px
+ min-height: 204px
+
+
+footer h3
+ font-size : 15px
+ margin : 0 0 10px 0
+ padding-top : 6px
+ font-weight : 400
+ color : $footer-h3-color
+ border-top : solid 4px $footer-h3-corder-color
+
+footer .row p
+ display : inline-block
+ margin : 0
+
+footer .row ul,
+footer .row li
+ display : block
+ color : $footer-color
+ line-height : 22px
+ padding : 0
+ margin-top : 0
+ list-style-type : none
+
+footer a
+ text-decoration : none
+ display : inline-block
+ color : $footer-color
+
+footer a:hover,
+footer a:active
+ text-decoration : underline
+
+a
+ text-decoration : none
+ display : block
+ color : $footer-color
+
+.status-circle
+ background : $pass-color
+ display : inline-block
+ height : 11px
+ width : 11px
+ text-indent : -9999px
+ margin-right : 5px
+ border-radius : 100px
+ -webkit-border-radius : 100px
+ -moz-border-radius : 100px
+ vertical-align: middle
diff --git a/assets/styles/app/main/tools.sass b/assets/styles/app/main/tools.sass
index 3593b272..5e3dbc7d 100644
--- a/assets/styles/app/main/tools.sass
+++ b/assets/styles/app/main/tools.sass
@@ -11,7 +11,7 @@
& > a.menu-popup-button
display: inline-block
text-align: left
- margin-top: -31px
+ margin-top: -32px
color: #fff
font-size: 13px
padding: 3px 24px 0 25px
@@ -33,13 +33,14 @@
display: none
position: absolute
right: 0
- top: -3px
+ top: -4px
width: 140px
background-color: #a6adad
@include border-bottom-radius(4px)
a
display: block
- color: #ffffff
+ color: $white
+ font-size: $font-size-small
padding: 5px 25px 5px 25px
&:hover:not(.disabled)
background-color: #909393
diff --git a/assets/styles/app/right.sass b/assets/styles/app/right.sass
index b7f96f8d..7c0b1642 100644
--- a/assets/styles/app/right.sass
+++ b/assets/styles/app/right.sass
@@ -2,11 +2,11 @@
#profile
#right
- min-width: 180px
- max-width: 180px
+ //min-width: 180px
+ //max-width: 180px
padding: 13px 20px 80px 20px
background-color: #E9E9E7
- float: right
+ //float: right
border-left: 1px solid $color-border-normal
h4
diff --git a/assets/styles/app/tabs.sass b/assets/styles/app/tabs.sass
index e0124b57..e96e71bf 100644
--- a/assets/styles/app/tabs.sass
+++ b/assets/styles/app/tabs.sass
@@ -17,9 +17,8 @@
height: 29px
li
display: inline-block
-
- &:hover
- background-color: $color-bg-tab-hover
+ &:hover
+ background-color: $color-bg-tab-hover
.active
background-color: $color-bg-tab-active
diff --git a/assets/styles/app/top.sass b/assets/styles/app/top.sass
index a8f263ef..55566ab4 100644
--- a/assets/styles/app/top.sass
+++ b/assets/styles/app/top.sass
@@ -101,6 +101,11 @@
.menu.community
min-width: 120px
+ .user
+ text-align: right
+ a
+ padding-right: 0
+
.menu.profile
.signing-in
background: inline-image('ui/spinner.svg') no-repeat 110px 22px
@@ -132,9 +137,9 @@
&.signed-in .signed-in
display: block
- img
- float: right
- margin: 13px 0 0 10px
+ // img
+ // float: right
+ // margin: 13px 0 0 10px
&:not(.signed-in):hover ul
display: none
@@ -158,61 +163,63 @@
// width : 78px
// text-indent : -9999px
-#user
- text-align : right
- cursor : pointer
+// #user
+// text-align : right
+// cursor : pointer
-#user p
- display : none
+// #user p
+// display : none
-// #top img
-// float : right
-// margin : -7px 10px 0 10px
-// width : 30px
-// height : 30px
-// border-radius: 100px
-
-#user ul
- text-align : left
- display : inline
- margin : 0
- padding : 15px 0 17px 0
- list-style : none
- z-index : 1000
-
-#user ul li ul
- padding : 0
- position : absolute
- top : 55px
- right : 0
- width : 150px
- display : none
- opacity : 0
- visibility : hidden
-
-#user ul li ul li
- background : $topbar-bg
- color : $white
- display : block
- line-height : 18px
- padding : 8px 18px
- margin : 0
-
-#user ul li ul li:last-child
- border-bottom-left-radius : 4px
- border-bottom-right-radius : 4px
-
-#user ul li ul li:hover
- background : #5e869a
- color : $white
- a
- color: $white
+#top img
+ float : right
+ margin : 14px 0 0 10px
+ width : 30px
+ height : 30px
+ border-radius: 100px
-#user ul li:hover ul
- display : block
- opacity : 1
- visibility : visible
-#user .handle a
- display: inline
+
+// #user ul
+// text-align : left
+// display : inline
+// margin : 0
+// padding : 15px 0 17px 0
+// list-style : none
+// z-index : 1000
+
+// #user ul li ul
+// padding : 0
+// position : absolute
+// top : 55px
+// right : 0
+// width : 150px
+// display : none
+// opacity : 0
+// visibility : hidden
+
+// #user ul li ul li
+// background : $topbar-bg
+// color : $white
+// display : block
+// line-height : 18px
+// padding : 8px 18px
+// margin : 0
+
+// #user ul li ul li:last-child
+// border-bottom-left-radius : 4px
+// border-bottom-right-radius : 4px
+
+// #user ul li ul li:hover
+// background : #5e869a
+// color : $white
+// a
+// color: $white
+
+
+// #user ul li:hover ul
+// display : block
+// opacity : 1
+// visibility : visible
+// #user .handle a
+// display: inline