Home Loggedin basic structure

stable
Xavier Julián 2015-03-24 13:02:54 +01:00 committed by Juanfran
parent 13e5f59ee7
commit 948c5f3036
7 changed files with 50 additions and 282 deletions

View File

@ -39,7 +39,7 @@ taiga.sessionId = taiga.generateUniqueSessionIdentifier()
configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEventsProvider, tgLoaderProvider, configure = ($routeProvider, $locationProvider, $httpProvider, $provide, $tgEventsProvider, tgLoaderProvider,
$compileProvider, $translateProvider) -> $compileProvider, $translateProvider) ->
$routeProvider.when("/", $routeProvider.when("/",
{templateUrl: "project/projects.html", resolve: {loader: tgLoaderProvider.add()}}) {templateUrl: "home/home-logged-in.html"})
$routeProvider.when("/project/:pslug/", $routeProvider.when("/project/:pslug/",
{templateUrl: "project/project.html"}) {templateUrl: "project/project.html"})

View File

@ -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

View File

@ -82,6 +82,13 @@ body {
position: relative; position: relative;
} }
.centered {
margin: 0 auto;
max-width: 1200px;
min-width: 960px;
width: 90%;
}
.wrapper { .wrapper {
display: flex; display: flex;
min-height: 100vh; min-height: 100vh;

View File

@ -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;
}
}

View File

@ -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;
}
}
}

View File

@ -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%;
}
}
}

View File

@ -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;
}
}