From d506c0909908225da506463df68971f2fa90002d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= Date: Thu, 26 Mar 2015 11:54:05 +0100 Subject: [PATCH] Profile projects --- .../modules/profile/profile-projects.jade | 131 ++++++++++++++++++ app/styles/dependencies/colors.scss | 2 + .../modules/profile/profile-projects.scss | 78 +++++++++++ 3 files changed, 211 insertions(+) create mode 100644 app/partials/includes/modules/profile/profile-projects.jade create mode 100644 app/styles/modules/profile/profile-projects.scss diff --git a/app/partials/includes/modules/profile/profile-projects.jade b/app/partials/includes/modules/profile/profile-projects.jade new file mode 100644 index 00000000..496ed6f6 --- /dev/null +++ b/app/partials/includes/modules/profile/profile-projects.jade @@ -0,0 +1,131 @@ +section.profile-projects + - for (var x = 0; x < 3; x++) + div.profile-project-single + div.profile-projects-left + + div.profile-project-title + h1 + a(href="", title="View {{ project.title }}") My Side Project + p We plan to build a hundred of so called "telehubs" so people from all over the world can immediately relocate their physical self at any other telehub in microseconds. The technology and science behind this project is sound and we are now ready to build the first telehub and then massproduce them. + + div.profile-project-tags.tags-container + // Tag border style has to be set by JS + span.tag(style='border-left: 5px solid #73d216;') + span.tag-name python + span.tag(style='border-left: 5px solid #cc0000;') + span.tag-name groovy + span.tag(style='border-left: 5px solid #25f45c;') + span.tag-name opensource + + div.profile-projects-right + + div.profile-project-stats + div.stat-comments(title="2 comments") + span.icon.icon-comment + span.stat-num 2 + div.stat-favorite.active(title="2 favorites") + span.icon.icon-star-fill + span.stat-num 4 + div.stat-viewer(title="2 followers") + span.icon.icon-open-eye + span.stat-num 4 + + div.profile-project-members + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/nexy_dre/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/cbillins/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/uxceo/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/syswarren/128.jpg", alt="{{ user.nickname }}") + + div.profile-project-single + div.profile-projects-left + div.profile-project-title + h1 + a(href="", title="View {{ project.title }}") Teletransportation hubs + + div.profile-project-tags.tags-container + // Tag border style has to be set by JS + span.tag(style='border-left: 5px solid #43d56f;') + span.tag-name javascript + span.tag(style='border-left: 5px solid #0000cc;') + span.tag-name css + span.tag(style='border-left: 5px solid #cc43fd;') + span.tag-name design + + div.profile-projects-right + div.profile-project-stats + div.stat-comments(title="2 comments") + span.icon.icon-comment + span.stat-num 2 + div.stat-favorite(title="2 favorites") + span.icon.icon-star-fill + span.stat-num 4 + div.stat-viewer(title="2 followers") + span.icon.icon-open-eye + span.stat-num 4 + div.profile-project-members + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg") + + div.profile-project-single + div.profile-projects-left + + div.profile-project-title + h1 + a(href="", title="View {{ project.title }}") Taiga + p Una plataforma social para crear comunidad entorno a la tienda. Esta comunidad está pensada para quedar a hacer deporte, compartir iniciativas. + + div.profile-project-tags.tags-container + // Tag border style has to be set by JS + span.tag(style='border-left: 5px solid #11cd00;') + span.tag-name PHP + span.tag(style='border-left: 5px solid #ff00dd;') + span.tag-name marketing + span.tag(style='border-left: 5px solid #cdcd54;') + span.tag-name wordpress + div.profile-projects-right + + div.profile-project-stats + div.stat-comments + span.icon.icon-comment + span.stat-num 2 + div.stat-favorite.active + span.icon.icon-star-fill + span.stat-num 4 + div.stat-viewer + span.icon.icon-open-eye + span.stat-num 4 + + div.profile-project-members + - for (var x = 0; x < 2; x++) + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/annapickard/128.jpg") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/nexy_dre/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/pixeliris/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/cbillins/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/allisongrayce/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/uxceo/128.jpg", alt="{{ user.nickname }}") + a(href="", title="View {{ user.nickname }} profile") + img(src="https://s3.amazonaws.com/uifaces/faces/twitter/syswarren/128.jpg", alt="{{ user.nickname }}") + + diff --git a/app/styles/dependencies/colors.scss b/app/styles/dependencies/colors.scss index 3275443a..3b73fad4 100755 --- a/app/styles/dependencies/colors.scss +++ b/app/styles/dependencies/colors.scss @@ -20,6 +20,7 @@ $postit: #fff8e4; $postit-hover: #f1e8cd; $postit-dark-hover: #cfc29b; + //Loading bar $green-japanese-laurel: #237400; $green-olive: #618000; @@ -28,3 +29,4 @@ $purple-eggplant: #810061; $yellow-pear: #bbe831; $menu: #232323; +$star-fill: #edd400; diff --git a/app/styles/modules/profile/profile-projects.scss b/app/styles/modules/profile/profile-projects.scss new file mode 100644 index 00000000..b2fae443 --- /dev/null +++ b/app/styles/modules/profile/profile-projects.scss @@ -0,0 +1,78 @@ +.profile-projects { + border-top: 1px solid $whitish; + .profile-project-single { + border-bottom: 1px solid $whitish; + display: flex; + justify-content: center; + min-height: 10rem; + padding: .8rem 1rem; + position: relative; + } + .profile-projects-left, + .profile-projects-right { + display: flex; + flex-direction: column; + } +} + +.profile-projects-left { + align-content: space-between; + flex: 4; + h1 { + @extend %bold; + @extend %xlarge; + margin-bottom: 0; + text-transform: none; + } + p { + color: $gray-light; + max-width: 70%; + } + .profile-project-tags { + align-content: flex-end; + display: flex; + flex: 3; + flex-wrap: wrap; + justify-content: flex-start; + } + .tag { + align-self: flex-end; + margin-bottom: .3rem; + } +} + +.profile-projects-right { + justify-content: space-between; + .profile-project-stats { + align-self: flex-end; + display: flex; + div { + color: $gray-light; + margin-right: .5rem; + .icon { + margin-right: .2rem; + vertical-align: center; + } + } + .active { + .icon { + color: $star-fill; + } + } + } + .profile-project-members { + align-self: flex-end; + display: flex; + flex-grow: 0; + flex-wrap: wrap; + margin-top: 1rem; + max-width: 160px; + a { + display: block; + } + img { + margin-right: .3rem; + width: 34px; + } + } +}