From d8303544b4ced4e5045cde5755ecff8e3e11fde7 Mon Sep 17 00:00:00 2001 From: Juanfran Date: Wed, 1 Apr 2015 12:34:59 +0200 Subject: [PATCH] recover project home --- app/coffee/app.coffee | 6 +- app/partials/project/project-list.jade | 2 +- app/styles/modules/create-project.scss | 58 +++++++ app/styles/modules/home-project.scss | 34 ++++ app/styles/modules/home-projects-list.scss | 191 +++++++++++++++++++++ 5 files changed, 289 insertions(+), 2 deletions(-) create mode 100644 app/styles/modules/create-project.scss create mode 100644 app/styles/modules/home-project.scss create mode 100644 app/styles/modules/home-projects-list.scss diff --git a/app/coffee/app.coffee b/app/coffee/app.coffee index 26fd1c73..a21baeae 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: "home/home-logged-in.html"}) + {templateUrl: "project/projects.html", resolve: {loader: tgLoaderProvider.add()}}) $routeProvider.when("/project/:pslug/", {templateUrl: "project/project.html"}) @@ -138,6 +138,10 @@ configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEven $routeProvider.when("/cancel-account/:cancel_token", {templateUrl: "user/cancel-account.html"}) + # User profile + $routeProvider.when("/profile", + {templateUrl: "home/home-logged-in.html"}) + # Auth $routeProvider.when("/login", {templateUrl: "auth/login.html"}) diff --git a/app/partials/project/project-list.jade b/app/partials/project/project-list.jade index 3e6d48d5..9e52dbd8 100644 --- a/app/partials/project/project-list.jade +++ b/app/partials/project/project-list.jade @@ -5,7 +5,7 @@ div(tg-projects-pagination) ul.projects-list <% _.each(projects, function(project) { %> li - a.button(href!='<%- project.url %>') + a(href!='<%- project.url %>') <%- project.name %> <% }) %> a.v-pagination-next.icon.icon-arrow-bottom(href='') \ No newline at end of file diff --git a/app/styles/modules/create-project.scss b/app/styles/modules/create-project.scss new file mode 100644 index 00000000..f7958a33 --- /dev/null +++ b/app/styles/modules/create-project.scss @@ -0,0 +1,58 @@ +.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 new file mode 100644 index 00000000..b093b945 --- /dev/null +++ b/app/styles/modules/home-project.scss @@ -0,0 +1,34 @@ +.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 new file mode 100644 index 00000000..bd805c70 --- /dev/null +++ b/app/styles/modules/home-projects-list.scss @@ -0,0 +1,191 @@ +.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; + line-height: 1; + 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; + line-height: 1.2rem; + 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; + } +}