Commit 3d20b91f authored by Matija Obreza's avatar Matija Obreza
Browse files

Step 4: Article pages

parent f82929b3
......@@ -193,7 +193,7 @@ module.exports = function(grunt) {
'<%= app.dist %>/styles/genesys.min.css' : [ '<%= app.dist %>/styles/genesys.css' ],
'<%= app.dist %>/styles/pages.min.css' : [ '<%= app.dist %>/styles/pages.css' ],
'<%= app.dist %>/styles/all.min.css' : [ '<%= app.dist %>/styles/bootstrap.css', '<%= app.dist %>/styles/jquery-ui.css', '<%= app.dist %>/styles/forza.css',
'<%= app.dist %>/styles/leaflet.css', '<%= app.dist %>/styles/genesys.css' ],
'<%= app.dist %>/styles/leaflet.css', '<%= app.dist %>/styles/genesys.css', '<%= app.dist %>/styles/pages.css' ],
}
}
},
......
......@@ -419,6 +419,7 @@ article.remove-from-transifex=Remove from Transifex
article.transifex-resource-updated=The resource was successfully updated on Transifex.
article.transifex-resource-removed=The resource was successfully removed from Transifex.
article.transifex-failed=An error occured while exchanging data with Transifex
article.share=Share this article
activitypost=Activity post
activitypost.add-new-post=Add new post
......
#content .three-see-also {
width: 70%;
margin: 0 auto;
.three-1, .three-2, .three-3 {
width: 233px;
height: 234px;
height: 230px;
display: inline-block;
cursor:pointer;
}
.three-1 {
background: url('../images/aim/three-see1.jpg') no-repeat 0 0;
}
.three-2 {
background: url('../images/aim/featured-institute.png') no-repeat 0 0;
margin: 0 5px;
}
.three-3 {
background: url('../images/aim/three-see3.jpg') no-repeat 0 0;
img {
max-width: 100%;
}
}
h2 {
display: inline-block;
width: 100%;
margin-bottom: 0;
text-transform: none;
font-size: 28px;
background: #88ba42;
padding: 15px 19px 34px;
margin-top: 116px;
font-family: 'Noto Sans';
}
}
/***************************MAIL-NOTIFICATIONS****************************************************/
.article.container {
.title{
margin: 20px;
font-size: 20px;
}
.text-wrap{
margin:0 20px;
}
.massege{
background:#88ba42;
color:#fff;
text-align:center;
padding: 30px 0;
font-size: 19px;
margin: 0 20px 30px;
}
.confirm{
text-align:center;
background:#e7e5df;
text-decoration:underline;
padding: 30px 0;
font-size: 19px;
margin: 0 20px 40px;
a{
color:#006db4;
&:hover{
color:#006db4;
}
}
}
.share-article-mail{
background:#4d4c46;
height: 55px;
text-align:center;
margin: 20px -10px 0;
p {
color:#fff;
display: inline-block;
padding-right: 20px;
font-size: 13px;
}
ul {
display: inline-block;
li {
display:inline-block;
margin-top: 5px;
vertical-align: middle;
a {
color:#fff;
}
}
.twitter {
border-right: 1px solid #dbdbda;
border-left: 1px solid #dbdbda;
padding: 10px 30px;
i {
font-size: 22px;
}
}
.envelope {
font-weight: bold;
padding: 11px 30px;
i {
font-size: 17px;
}
}
.facebook {
border-right: 1px solid #dbdbda;
padding: 10px 30px;
i {
font-size: 20px;
}
}
}
}
}
/******************************************* ABOUT PAGE ****************************************/
.top-title {
background-color: #88ba42;
color: #fff;
padding: 10px 30px;
font-family: 'forzabook';
font-weight: bold;
margin: 0px;
font-size: 37px;
div{
padding-left:30px;
}
h1{
font-weight: bold;
}
}
.top-img-about {
img {
background-size:cover;
max-height: 400px;
width:100%;
}
}
html[dir="rtl"] #content{
.right-side .share-article ul{
.facebook {
border-left: 1px solid #dbdbda;
border-right:none;
}
.envelope {
border-right: 1px solid #dbdbda;
border-left:none;
}
}
.share-article p{
right:0;
left:auto;
}
.main-col .article.container .right-side .see-also h3 span{
padding: 13px 10px 13px 94px !important;
text-align:right;
}
}
#content .right-side {
background-color: #fff;
padding: 32px 58px;
p {
font-size: 17px;
line-height: 29px;
margin-bottom: 30px;
}
> p:first-of-type {
font-size: 22px;
line-height: 35px;
font-weight: 100;
margin-bottom: 30px;
}
.white-title {
background-color: #fff;
color: #88ba42;
font-family: 'forzabook';
font-size: 22px;
font-weight: 900;
margin-bottom: 30px;
}
.share-article {
border-bottom: 1px solid #dbdbda;
border-top: 1px solid #dbdbda;
height: 85px;
position: relative;
p {
color: #b6b6b4;
padding-top: 28px;
position: absolute;
left: 0;
}
ul {
display: block;
margin: 0 auto;
margin-top: 20px;
width: 100%;
text-align: center;
li {
height: 45px;
box-sizing: border-box;
vertical-align: top;
a {
color: #918f8a;
}
}
.twitter {
border-right: 1px solid #dbdbda;
border-left: 1px solid #dbdbda;
padding: 10px 30px;
i {
font-size: 22px;
}
}
.envelope {
border-left: 1px solid #dbdbda;
font-weight: bold;
padding: 11px 30px;
i {
font-size: 17px;
}
}
.facebook {
border-right: 1px solid #dbdbda;
padding: 10px 30px;
i {
font-size: 20px;
}
}
}
}
.share-article + p {
margin: 30px 0 20px;
.more {
font-weight: 900;
font-size: 16px;
font-family: 'forzabook';
background-color: #88ba42;
color: #fff;
text-transform: uppercase;
padding: 12px 95px 12px 10px;
}
}
.three-see-also {
width: 100%;
}
}
.sidebar-nav {
text-transform: uppercase;
padding: 0;
ul {
margin: 38px 0 0 15px;
html[dir="rtl"] & {
margin: 38px 15px 0 0;
}
}
li {
border-bottom: 1px solid #c8c6c0;
padding-left: 10px;
&:first-of-type {
border-top: 1px solid #c8c6c0;
}
&:hover{
background-color: #d0cfc9;
}
a {
color: #006db4;
font-weight: 900;
padding: 10px 0 10px;
display: block;
&:hover{
text-decoration:none;
}
&:before {
content: "\f0da";
font-family: FontAwesome;
color: #c8c6c0;
font-size: 17px;
padding: 0 10px 0 0;
html[dir="rtl"] & {
content: "\f0d9";
padding: 0 0 0 10px;
}
}
}
}
}
@media ( min-width : 1200px) {
#content > #custom-wide {
width: 1140px;
padding: 0 0 30px 0;
}
#content .about-page-row {
margin-left: -15px;
margin-right: 10px;
}
}
@media ( max-width : 1200px) {
.user-block {
height: 240px;
padding: 0 0 0 20px;
}
.user-block .user-cont-main, .user-block .user-cont-second, .user-block .user-status {
height: 140px;
}
#content .three-see-also {
width: 80%;
}
.user-block .user-status {
width: 25%;
p span {
width: 105px;
}
}
.user-block .user-cont-main, .user-block .user-cont-second {
p span {
display: block;
}
}
.user-block .all-posts-links {
margin-top: 10px;
}
#content .last-info-tab > div {
padding: 0;
}
#content .main-col .article.container .sidebar-nav ul {
padding: 44px 0 0 0;
width: 106%;
}
.container.network {
.right-block{
width: 51.15%;
}
}
}
// **********************************************************************
//**********************************************************************
// *********** TABLET ***********
//**********************************************************************
//***********************************************************************
@media (max-width: 1200px){
html[dir="rtl"] .custom-about-list ul {
padding:0;
}
}
@media (max-width: 992px) {
html[dir="rtl"] .navbar-nav > li {
float: none;
}
html[dir="rtl"] .container.network .header-info.row {
.middle-block{
margin-right: 0;
}
.right-block {
margin-left: 0;
}
}
.main-col {
margin-top: 0;
h1.profile-title {
padding-left: 20px;
}
}
.user-block {
min-height: 640px;
button {
padding-top: 5px;
}
.institute {
padding-top: 5px;
}
.user-cont-main {
margin-top: 22px;
padding-top: 16px;
padding-bottom: 13px;
p {
font-size: 14px;
line-height: 22px;
}
}
.pull-right {
border-top: 1px solid #afaeaa;
border-top: 1px solid #afaeaa;
width: 100%;
padding-top: 20px;
float: none !important;
text-align: center;
}
}
.user-block .user-cont-main, .user-block .user-cont-second, .user-block .user-status {
width: 100%;
border-top: 1px solid #afaeaa;
border-right: 0;
padding-top: 14px;
float: none;
height: auto;
p span {
display: inline-block;
width: 90px;
}
}
.user-block .user-status {
p span {
width: 110px;
}
p:last-of-type {
margin-bottom: 0;
}
}
.user-block > div {
height: auto;
}
.user-block + div {
padding-top: 20px;
}
#content {
.custom-about {
padding: 32px 15px;
}
.bookmarked-request > div {
width: 100%;
}
.bookmarked-request {
width: 90%;
padding-bottom: 30px;
h2 {
margin-bottom: 10px;
}
}
.more-info-tabs {
padding: 20px 20px 15px;
> div {
width: 100%;
}
> h2 {
margin-bottom: 10px;
}
}
.three-see-also {
width: 100%;
h2 {
padding: 18px 19px 28px;
}
.three-1 {
background: url("../images/aim/three-see-mobile.jpg") no-repeat 0 0;
height: 225px;
margin: 0 auto 10px;
display: block;
}
.three-2, .three-3 {
height: 225px;
margin: 0 auto 10px;
display: block;
}
.three-2 {
background: url("../images/aim/featured-institute.png") no-repeat 0 0;
}
.three-3 {
background: url("../images/aim/slider/img2.jpg") no-repeat 0 0;
h2 {
padding-top: 21px;
}
}
}
}
th {
min-width: 60px;
}
.user-block .user-cont-second, .user-block .user-status {
padding-left: 0;
}
.user-block .all-posts-links {
margin: 9px 0;
}
.user-cont-second {
padding-bottom: 12px;
}
.user-block {
padding: 0 20px 0 20px;
.user-foto {
width: 50%;
padding-top: 18px;
}
.user-info p:first-of-type {
padding-top: 28px;
line-height: 40px;
}
.user-info p:last-of-type {
width: auto;
float: left;
}
}
.top-title {
padding: 30px 25px;
font-size: 30px;
}
#content {
.custom-about > p:first-of-type {
line-height: 36px;
}
.custom-about .share-article p {
display: none;
}
.custom-about .share-article {
margin-left: -15px;
margin-right: -15px;
}
}
#content .main-col .article.container .sidebar-nav ul {
padding: 44px 0 0 0;
width: 100%;
}
.article .custom-about-list{
display:none;
}
.container.network .header-info.row {
.middle-block{
margin-left:0;
width:100%;
}
.right-block{
margin-right:0;
width:100%;
}
.jumbotron .basic{
width:100%;
}
}
}
@media (max-width:767px){
.container.network{
padding:0;
.network-title{
margin:0;
}
.jumbotron,
.wrapp{
padding: 0 15px;
}
.most-represented{
padding-right:0;
}
}
}
@media (max-width:680px) {
.container.accession{
.mobile-title{
display:block;
color:#fff;
background:#88ba42;
margin: 0;
padding: 10px;
}
.nav-header{
text-align: center;
.results, .form-accession, .overview, .map{
display:none;
}
.form-control-accession {
margin-left:0;
width:80%;
}
}
table.accessions {
margin: 0;
max-width: 100%;
td.notimportant{
display:none;
}
table{
tr{
td{
padding-left:0;
}
}
}
}
}
#allfilters{
#menu1{