Skip to content

Commit

Permalink
FeaturedData section initial redesign (#7)
Browse files Browse the repository at this point in the history
  • Loading branch information
@iannesbitt
iannesbitt committed Jan 29, 2024
1 parent 8d7dba9 commit 7600f24
Show file tree
Hide file tree
Showing 4 changed files with 145 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/drp/js/themes/drp/config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -639,7 +639,7 @@ MetacatUI.themeMap =
"views/TextView" : MetacatUI.root + "/js/themes/" + MetacatUI.theme + "/views/TextView.js",
// Templates
"templates/mainContent.html" : MetacatUI.root + '/js/themes/' + MetacatUI.theme + '/templates/mainContent.html',
//"templates/featuredData.html" : MetacatUI.root + '/js/themes/' + MetacatUI.theme + '/templates/featuredData.html',
"templates/featuredData.html" : MetacatUI.root + '/js/themes/' + MetacatUI.theme + '/templates/featuredData.html',
"templates/navbar.html" : MetacatUI.root + "/js/themes/" + MetacatUI.theme + "/templates/navbar.html",
"templates/about.html" : MetacatUI.root + "/js/themes/" + MetacatUI.theme + "/templates/about.html",
"templates/support.html" : MetacatUI.root + "/js/themes/" + MetacatUI.theme + "/templates/support.html",
Expand Down
92 changes: 82 additions & 10 deletions src/drp/js/themes/drp/css/metacatui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
padding-bottom: 0px;
}
#Content {
padding: 80px 40px 180px 40px;
padding: 80px 40px 120px 40px;
}

a {
Expand Down Expand Up @@ -471,7 +471,7 @@ select {
border-color: #04405f;
}
.btn-primary:hover {
background-color: #04405f;
background-color: #05557d;
border-color: #04405f;
}

Expand Down Expand Up @@ -553,6 +553,77 @@ section#mainContent a.btn-info:hover {
background-color: #5C7F8C;
}

/* FEATURED DATA CSS
-------------------------------------------------- */

#FeaturedData {
background-color: #878787;
color: #FDFDFD;
width: calc(100% + 80px);
margin-left: -40px;
margin-top: -40px;
}

#FeaturedData > section.row {
border-top: 1px solid #878787;
height: 554px;
position: relative;
}

#FeaturedData > section:nth-child(even){
background-color: #333366;
}

#FeaturedData > section:nth-child(odd){
background-color: #6C94A4;
}

#FeaturedData h2 {
font-weight: 300;
color: #FDFDFD;
text-decoration: none;
}

#FeaturedData h2 a {
color: #FDFDFD;
text-decoration: none;
}
#FeaturedData h2 a.dark{
color: #333;
}
#FeaturedData .accordion{
position: absolute;
color: #FDFDFD;
top: 0px;
padding: 20px 20px 20px 40px;
width: calc(100% - 60px);
}
#FeaturedData .accordion-heading{
width: 75%;
}
#FeaturedData .accordion-body{
clear: both;
}
#FeaturedData .accordion-inner {
border-top: 0px;
background-color: #555555;
background: rgba(0,0,0,0.6);
color: #FFFFFF;
border-radius: 6px 6px 6px 6px;
width: 75%;
}
#FeaturedData > section.row:nth-child(even) .accordion-inner,
#FeaturedData > section.row:nth-child(even) .accordion-heading,
#FeaturedData > section.row:nth-child(even) .accordion-body .btn{
float: right;
}
#FeaturedData .accordion-inner a{
color: white;
text-decoration: underline;
}
#FeaturedData .accordion-inner a.btn{
text-decoration: none;
}

/* NAVIGATION
-------------------------------------------------- */
Expand All @@ -573,7 +644,7 @@ section#mainContent a.btn-info:hover {
}
#Navbar .logo{
max-height: 50px;
max-width: 265px;
max-width: 260px;
}
.btn.direct-search {
padding: 4px 8px;
Expand Down Expand Up @@ -684,6 +755,7 @@ section#mainContent a.btn-info:hover {
font-weight: 400;
font-family: "Source Sans Pro", sans-serif;
font-size: 1.2em;
padding: 10px 12px;
}

.navbar .nav > li i {
Expand Down Expand Up @@ -2109,14 +2181,13 @@ img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
width: 100%;
/* position: absolute; */
height: 100%;
margin: -180px -40px 0 -80px;
margin: -80px -40px 0 -40px;
bottom: 0px;
overflow: hidden;
padding-bottom: 0;
padding-top: 8rem;
padding-bottom: 6%;
padding-top: 2rem;
}

#mainContent .form-input{
Expand All @@ -2127,8 +2198,9 @@ img[src*="gstatic.com/"], img[src*="googleapis.com/"] {
#mainContent .container {
width: auto;
margin-top: 8%;
margin-right: calc(10% - 20px);
margin-left: calc(10% + 20px);
margin-bottom: 4%;
margin-right: calc(10% + 20px);
margin-left: calc(10% - 20px);
border-radius: 6px;
padding-left: 20px;
padding-right: 20px;
Expand Down
19 changes: 17 additions & 2 deletions src/drp/js/themes/drp/css/metacatui.responsive.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,15 +41,30 @@ and (max-width : 480px) {
.navbar .title {
max-width: 175px;
}
.navbar .nav > li > a {
padding: 10px 10px;
font-size: 1.0em;
}
#Navbar .logo {
margin-right: none;
}
#mainContent .container {
margin-bottom: 6%
}
}

@media only screen and (max-width: 900px) {
#mainContent .container {
margin-bottom: 6%;
}
}

@media only screen and (max-width: 768px) {
#mainContent {
margin: -40px -40px 0 -40px;
margin-bottom: 0px;
font-size: 80%;
}
#mainContent .container {
margin-top: 15%
margin-top: 8%
}
}
57 changes: 45 additions & 12 deletions src/drp/js/themes/drp/templates/featuredData.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@
<div class="accordion-heading">
<h2>
<a class="accordion-toggle dark">
Cumulative human impacts data (2008 and 2013)
3-dimensional terrestrial scanning</br>
<span class="citation">
Halpern B, et al. 2015.
Minnesota College of Art and Design
</span>
</a>
</h2>
Expand All @@ -17,7 +17,7 @@ <h2>
Data used to calculate 2008 and 2013 cumulative human impacts in: <a href="http://www.nature.com/ncomms/2015/150714/ncomms8615/full/ncomms8615.html" target="_blank">Halpern et al. 2015</a>. Spatial and temporal changes in cumulative human impacts on the world's ocean. Seven data packages are available for this project: (1) supplementary data (habitat data and other files); (2) raw stressor data (2008 and 2013); (3) stressor data rescaled by one time period (2008 and 2013, scaled from 0-1); (4) stressor data rescaled by two time periods (2008 and 2013, scaled from 0-1); (5) pressure and cumulative impacts data (2013, all pressures); (6) pressure and cumulative impacts data (2008 and 2013, subset of pressures updated for both time periods); (7) change in pressures and cumulative impact (2008 to 2013).
</p>
<p>
<a class="btn btn-primary " href="https://knb.ecoinformatics.org/view/doi:10.5063/F19Z92TW">View data set<i class="icon icon-double-angle-right"></i></a>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/portals/mcad">View data portal<i class="icon icon-double-angle-right"></i></a>
</p>
</div>
</div>
Expand All @@ -29,9 +29,9 @@ <h2>
<div class="accordion-heading">
<h2>
<a class="accordion-toggle">
Lake Baikal Plankton Dynamics, 60-year data set.
Biosecurity Layer</br>
<span class="citation">
Izmest'eva, L. 2006.
University of Minnesota
</span>
</a>
</h2>
Expand All @@ -52,7 +52,7 @@ <h2>
Largest Freshwater Lake - Lake Baikal, Siberia. Global Change Biology.
</p>
<p>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/view/doi%3A10.5063%2FAA%2Fnceas.290.8">View data<i class="icon icon-double-angle-right"></i></a>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/portals/umn">View data portal<i class="icon icon-double-angle-right"></i></a>
</p>
</div>
</div>
Expand All @@ -64,9 +64,9 @@ <h2>
<div class="accordion-heading">
<h2>
<a class="accordion-toggle">
Divergent responses to spring and winter warming drive community level flowering trends.
Remote Sensing and Geophysics</br>
<span class="citation">
Cook, B. 2012.
University of North Dakota
</span>
</a>
</h2>
Expand All @@ -87,7 +87,7 @@ <h2>
corresponds to the first flowering dates at Washington DC.
</p>
<p>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/view/nceas.997.2">View data<i class="icon icon-double-angle-right"></i></a>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/portals/und">View data portal<i class="icon icon-double-angle-right"></i></a>
</p>
</div>
</div>
Expand All @@ -99,9 +99,9 @@ <h2>
<div class="accordion-heading">
<h2>
<a class="accordion-toggle">
USVI Coral Reef: Decadal-scale changes in community structure from 1987 to 2011.
Materials Engineering</br>
<span class="citation">
CSU Northridge and Edmunds, P. 2013.
Stony Brook University
</span>
</a>
</h2>
Expand All @@ -120,9 +120,42 @@ <h2>
Virgin Islands, Marine ecology Progress Series.
</p>
<p>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/view/doi%3A10.5063%2FAA%2Fknb-csun-usvi.10700">View data<i class="icon icon-double-angle-right"></i></a>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/portals/sbu">View data portal<i class="icon icon-double-angle-right"></i></a>
</p>
</div>
</div>
</div>
</section>
<section class="row">
<img alt="Coral" src="<%= MetacatUI.root %>/js/themes/knb/img/featured_coral.jpg" style="width: 100%; height: 100%" />
<div class="accordion">
<div class="accordion-heading">
<h2>
<a class="accordion-toggle">
Arctic Material Physics</br>
<span class="citation">
Virginia Tech
</span>
</a>
</h2>
</div>
<div class="accordion-body">
<div class="accordion-inner">
<p>
These time series data sample percent cover of Scleractinian corals
by genus measured from photo quadrats. Percent cover is given for
each quadrat, each site, each year from 1987 to 2011. Counts of
juvenile corals conducted in situ and small colonies less than 4 cm
diameter are pooled from all sites. Supplementary data include in
situ seawater temperature daily mean from 1989 to 2011. These data
were used to create the figures in Edmunds, P.J., 2013, Decadal-scale
changes in the community structure of coral reefs in St. John, US
Virgin Islands, Marine ecology Progress Series.
</p>
<p>
<a class="btn btn-primary " href="<%= MetacatUI.root %>/portals/vt">View data portal<i class="icon icon-double-angle-right"></i></a>
</p>
</div>
</div>
</div>
</section>

0 comments on commit 7600f24

Please sign in to comment.