From 948c5f303683ca506ce3fce62b388962e16fb428 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Tue, 24 Mar 2015 13:02:54 +0100 Subject: [PATCH] Home Loggedin basic structure --- app/coffee/app.coffee | 2 +- app/partials/home/home-logged-in.jade | 10 ++ app/styles/core/base.scss | 7 + app/styles/layout/profile.scss | 32 ++++ app/styles/modules/create-project.scss | 58 ------- app/styles/modules/home-project.scss | 34 ---- app/styles/modules/home-projects-list.scss | 189 --------------------- 7 files changed, 50 insertions(+), 282 deletions(-) create mode 100644 app/partials/home/home-logged-in.jade create mode 100644 app/styles/layout/profile.scss delete mode 100644 app/styles/modules/create-project.scss delete mode 100644 app/styles/modules/home-project.scss delete mode 100644 app/styles/modules/home-projects-list.scss diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index 32807348..482fe1bf 100644 --- a/app/coffee/app.coffee +++ b/app/coffee/app.coffee @@ -39,7 +39,7 @@ taiga.sessionId = taiga.generateUniqueSessionIdentifier() configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEventsProvider, tgLoaderProvider, $compileProvider, $translateProvider) -> $routeProvider.when("/", - {templateUrl: "project/projects.html", resolve: {loader: tgLoaderProvider.add()}}) + {templateUrl: "home/home-logged-in.html"}) $routeProvider.when("/project/:pslug/", {templateUrl: "project/project.html"}) diff --git a/app/partials/home/home-logged-in.jade b/app/partials/home/home-logged-in.jade new file mode 100644 index 00000000..89b347d1 --- /dev/null +++ b/app/partials/home/home-logged-in.jade @@ -0,0 +1,10 @@ +include ../includes/components/beta +div.profile.centered + div.profile-bar User bar + div.main + div.hero + div.content-wrapper + div.content + div.sidebar Sidebar + + diff --git a/app/styles/core/base.scss b/app/styles/core/base.scss index a98ce08e..2be99cef 100644 --- a/app/styles/core/base.scss +++ b/app/styles/core/base.scss @@ -82,6 +82,13 @@ body { position: relative; } +.centered { + margin: 0 auto; + max-width: 1200px; + min-width: 960px; + width: 90%; +} + .wrapper { display: flex; min-height: 100vh; diff --git a/app/styles/layout/profile.scss b/app/styles/layout/profile.scss new file mode 100644 index 00000000..6bdccd15 --- /dev/null +++ b/app/styles/layout/profile.scss @@ -0,0 +1,32 @@ +.profile { + display: flex; + min-height: 100vh; + padding: 2rem 0; + .profile-bar { + background: #f0f; + flex: 1; + } + .main { + background: #00f; + display: flex; + flex: 4; + flex-direction: column; + padding: 0; + } + .content-wrapper { + display: flex; + min-height: 100vh; + } + .hero { + background: #0ff; + min-height: 10vh; + } + .content { + background: #5dcd42; + flex: 4; + } + .sidebar { + background: #121212; + flex: .5; + } +} diff --git a/app/styles/modules/create-project.scss b/app/styles/modules/create-project.scss deleted file mode 100644 index c3a8b5e6..00000000 --- a/app/styles/modules/create-project.scss +++ /dev/null @@ -1,58 +0,0 @@ -.create-project { - @extend %triangled-bg; - align-content: center; - align-items: center; - bottom: 0; - justify-content: center; - left: 0; - position: fixed; - right: 0; - top: 0; - z-index: 999; - fieldset { - margin-bottom: 1rem; - } - .create-project-container { - flex-basis: 400px; - flex-grow: 0; - } - h1 { - color: $white; - text-align: center; - } - .logo, - .tagline { - margin-bottom: 1rem; - text-align: center; - } - .tagline { - @extend %xlarge; - @extend %title; - color: $white; - line-height: 2rem; - text-transform: uppercase; - } - form { - margin-bottom: 2rem; - } - input { - background: $white; - @include placeholder { - color: $gray-light; - } - } - .button { - color: $white; - display: block; - margin-bottom: .5rem; - text-align: center; - &:hover { - background: $fresh-taiga; - } - } - a { - &:hover { - color: $white; - } - } -} diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss deleted file mode 100644 index b093b945..00000000 --- a/app/styles/modules/home-project.scss +++ /dev/null @@ -1,34 +0,0 @@ -.summary-stats { - align-items: flex-start; - display: flex; - .info-num { - @extend %xlarge; - @extend %bold; - float: left; - margin-right: .3rem; - position: relative; - top: 5px; - } - .info-text { - @extend %small; - float: left; - line-height: .9rem; - } -} - -.project-data-container { - display: flex; - justify-content: space-between; - ul { - flex-grow: 0; - max-width: 33%; - } - li { - display: inline-block; - margin-right: .1rem; - width: 10%; - figure { - width: 100%; - } - } -} diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss deleted file mode 100644 index 40962a31..00000000 --- a/app/styles/modules/home-projects-list.scss +++ /dev/null @@ -1,189 +0,0 @@ -.home-projects-list, -.home-project { - @extend %background-taiga; - align-content: center; - align-items: center; - background-color: $black; - background-position: center center; - background-size: cover; - display: flex; - height: 100%; - justify-content: center; - left: 0; - padding: 0; - position: fixed; - top: 0; - width: 100%; - .welcome-user { - display: flex; - position: absolute; - right: 1rem; - top: 1rem; - p { - color: $whitish; - margin-bottom: 0; - span:before { - content: ' '; - } - } - .logout { - @extend %small; - float: right; - &:hover { - color: $red-light; - } - } - .info { - padding-right: 1rem; - } - img { - width: 40px; - } - } -} -.home-projects-wrapper { - width: 1200px; -} - -.home-projects-list-inner { - display: flex; -} - -.recent-projects { - flex-grow: 8; - max-width: 800px; - ul { - display: flex; - flex-wrap: wrap; - margin: 0; - padding: 0; - } - a { - height: 100%; - left: 0; - padding: 1rem; - position: absolute; - top: 0; - width: 100%; - } - li { - background-color: rgba($white, .5); - color: $whitish; - flex-basis: 230px; - flex-grow: 1; - flex-shrink: 0; - height: 130px; - margin-bottom: 1rem; - margin-right: 1rem; - overflow: hidden; - position: relative; - transition: background-color .3s linear; - width: 23.5%; - &:hover { - background-color: rgba($fresh-taiga, .5); - cursor: pointer; - transition: background-color .3s linear; - p { - color: $gray-light; - transition: color .3s linear; - } - } - } - h2 { - color: $whitish; - line-height: 2rem; - } - p { - color: $grayer; - transition: color .3s linear; - } -} - -.project-content { - h2 { - margin-bottom: .5rem; - } - p { - @extend %small; - line-height: 1rem; - } -} - -.all-projects { - background-color: rgba(0, 0, 0, .5); - display: flex; - flex-direction: column; - flex-grow: 1; - margin-left: 1rem; - max-height: 422px; - padding: 1rem; - width: 285px; - h1 { - color: $whitish; - flex-shrink: 0; - text-align: center; - } - .v-pagination-list { - max-height: 221px; - } - ul { - left: 0; - margin-bottom: 0; - position: relative; - top: 0; - width: 100%; - } - li { - border-bottom: 2px solid $gray; - a { - @extend %large; - @extend %title; - color: $whitish; - display: block; - padding: 1rem; - text-transform: uppercase; - width: 100%; - &:hover { - background-color: $gray; - transition: background-color .3s linear; - } - } - .active { - background-color: $gray; - transition: background-color .3s linear; - } - } - .projects-pagination { - width: 100%; - } - .create-project-button-wrapper { - display: flex; - flex-shrink: 0; - .create-project-button { - flex-grow: 8; - margin-right: .2rem; - text-align: center; - } - .import-project-button { - flex-grow: 1; - padding-left: .5rem; - padding-right: .5rem; - text-align: center; - .icon { - color: $grayer; - margin: 0; - } - } - } - .button-green { - color: $whitish; - text-align: center; - width: 100%; - &:hover { - color: $whitish; - } - } - .v-pagination-next { - margin-bottom: 1rem; - } -}