Skip to content

Commit

Permalink
Merge pull request #11 from openpermissions/css_namespace
Browse files Browse the repository at this point in the history 
Namespace css
  • Loading branch information
@mattijohn
mattijohn authored Jul 8, 2016
2 parents aa3dfa1 + dd2c5fc commit 09b646d
Show file tree
Hide file tree
Showing 2 changed files with 92 additions and 104 deletions.
150 changes: 69 additions & 81 deletions src/templates/cards.tag
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,31 @@
<offer-card>
<div class="logo" style={parent.cssStyleRules(undefined, item.primary_color)} id={item.id}>
<div class="opp_logo" style={parent.cssStyleRules(undefined, item.primary_color)} id={item.id}>
<img src={item.logo}></img>
</div>
<h1 style={parent.cssStyleRules(item.secondary_color)} class="name" id={item.id}>{item.name}</h1>
<raw class="usage" content="{item.description}"></raw>
<a class ="details" style={parent.cssStyleRules(item.secondary_color)} href={parent.formatDetailsUrl(item.repositoryId, item.id)}>More Details</a>
<a if={item.paymentUrl} target="_blank" href="{item.paymentUrl}" style={parent.cssStyleRules('#fff', item.primary_color)} class="button" id={item.id}> Buy for {parent.formatMoney(item.price.value, item.price.unit)}</a>
<a if={item.link && !item.paymentUrl} target="_blank" href={item.link} style={parent.cssStyleRules('#fff', item.primary_color)} class="button" id={item.id}> Go to Site</a>
<div class="footer-logo">
<h1 style={parent.cssStyleRules(item.secondary_color)} class="opp_name" id={item.id}>{item.name}</h1>
<raw class="opp_usage" content="{item.description}"></raw>
<a class ="opp_details" style={parent.cssStyleRules(item.secondary_color)} href={parent.formatDetailsUrl(item.repositoryId, item.id)}>More Details</a>
<a if={item.paymentUrl} target="_blank" href="{item.paymentUrl}" style={parent.cssStyleRules('#fff', item.primary_color)} class="opp_button" id={item.id}> Buy for {parent.formatMoney(item.price.value, item.price.unit)}</a>
<a if={item.link && !item.paymentUrl} target="_blank" href={item.link} style={parent.cssStyleRules('#fff', item.primary_color)} class="opp_button" id={item.id}> Go to Site</a>
<div class="opp_footer-logo">
<p>Powered by </p> <img src="https://s3-eu-west-1.amazonaws.com/copyrighthub-matrix-images/opp-logo.png"></img>
</div>
</offer-card>

<organisation-card>
<div class="logo" style={parent.cssStyleRules(undefined, item.primary_color)} id={item.id}>
<div class="opp_logo" style={parent.cssStyleRules(undefined, item.primary_color)} id={item.id}>
<img src={item.logo}></img>
</div>
<h1 style={parent.cssStyleRules(item.secondary_color)} class="name" id={item.id}>{item.name}</h1>
<raw class="usage" content="{item.description}"></raw>
<a if={item.link} href={item.link} style={parent.cssStyleRules('#fff', item.primary_color)} class="button" id={item.id}> Go to Site</a>
<div class="footer-logo">
<h1 style={parent.cssStyleRules(item.secondary_color)} class="opp_name" id={item.id}>{item.name}</h1>
<raw class="opp_usage" content="{item.description}"></raw>
<a if={item.link} href={item.link} style={parent.cssStyleRules('#fff', item.primary_color)} class="opp_button" id={item.id}> Go to Site</a>
<div class="opp_footer-logo">
<p>Powered by </p> <img src="https://s3-eu-west-1.amazonaws.com/copyrighthub-matrix-images/opp-logo.png"></img>
</div>
</organisation-card>

<cards>
<div class="swiper-container swiper" id="container">
<div class="swiper-container swiper" id="opp_container">
<div class="swiper-wrapper" id="wrapper">
<div each={item in this.items} class="swiper-slide">
<offer-card if={parent.type=='offer'} item={item}/>
Expand Down Expand Up @@ -58,42 +58,28 @@
</script>

<style>
#container {
border-top: solid 0.08em #FFF;
border-bottom: solid 0.08em #FFF;
width:100%;
height:470px;
margin: 0 auto;
}

#container .swiper-slide {
width:250px;
height:400px;
margin: 20px;
background: #fff;
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

#container .swiper-button-prev,
#container .swiper-button-next {
height: 20px;
top: 98%;
}

.button_span {
float: right;
position: relative;
left: -50%; /* or right 50% */
text-align: left;
border: none;
background-color:white;
#opp_container {
border-top: solid 0.08em #FFF;
border-bottom: solid 0.08em #FFF;
width:100%;
height:470px;
margin: 0 auto;
}

.details {
font-size:14px;
font-family: 'Signika', sans-serif;
#opp_container .swiper-slide {
width:250px;
height:400px;
margin: 20px;
background: #fff;
-webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
-moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

#opp_container .swiper-button-prev,
#opp_container .swiper-button-next {
height: 20px;
top: 98%;
}

.swiper-slide h1 {
Expand All @@ -103,67 +89,69 @@
text-align:center;
font-family: 'Lato', sans-serif; font-weight: 400; line-height: 58px;
}
.name{
.opp_name{
font-size:20px;
position: relative;
margin-left: 10px;
margin-top:15px;
font-family: 'Signika', sans-serif; line-height: 35px;
}

.usage{
.opp_usage{
display:block;
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 14px;
padding:0 20px;
height:48%;
}

.details {
display: block;
position: absolute;
bottom: 85px;
left: 50px;
width: 100px;
margin: auto;
margin-bottom: 5px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 14px/20px Arial, sans-serif;
.opp_details {
font-size:14px;
font-family: 'Signika', sans-serif;
display: block;
position: absolute;
bottom: 85px;
left: 50px;
width: 100px;
margin: auto;
margin-bottom: 5px;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 14px/20px Arial, sans-serif;
}

.button {
display: block;
position: absolute;
bottom: 50px;
left: 50px;
color: #fff;
width: 100px;
margin: auto;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 12px/35px Arial, sans-serif;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
.opp_button {
display: block;
position: absolute;
bottom: 50px;
left: 50px;
color: #fff;
width: 100px;
margin: auto;
padding: 0 20px;
text-align: center;
text-decoration: none;
font: bold 12px/35px Arial, sans-serif;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
box-shadow: 1px 1px 1px rgba(0,0,0, .29), inset 1px 1px 1px rgba(255,255,255, .44);
}

.logo{
.opp_logo{
background: #2A2A28;
width:250px;
height:50px;
}

.logo img{
.opp_logo img{
width:220px;
height:40px;
display:block;
margin: 0 auto;
padding-top: 7px;
}
.footer-logo{
.opp_footer-logo{
position:absolute;
height:40px;
width:100%;
Expand All @@ -172,11 +160,11 @@
border-color: #6C7A89;
background: #DADFE1;
}
.footer-logo img{
.opp_footer-logo img{
height:40px;
float:left;
}
.footer-logo p{
.opp_footer-logo p{
font-family: 'Lucida Sans', Arial, sans-serif;
font-size: 12px;
float:left;
Expand Down
46 changes: 23 additions & 23 deletions src/templates/error.tag
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
<failure>
<div id="container">
<div class="error_card">
<div id="opp_container">
<div class="opp_error-card">
<h1>Not Found</h1>
<div class="body">
<div class="opp_body">
<p> Unfortunately we could not find any information about this asset.</p>
</div>
<div class="footer">
<div class="opp_footer">
<p> If this asset belongs to you and you would like to know more about registering it with the Open Permissions Platform,
please contact <a href="mailto:[email protected]" target="_top">OPP Support</a> for more information.</p>
</div>
<div class="footer-logo">
<div class="opp_footer-logo">
<p>Powered by </p> <img src="https://s3-eu-west-1.amazonaws.com/copyrighthub-matrix-images/opp-logo.png"></img>
</div>
</div>
</div>
</failure>

<error>
<div id="container">
<div class="error_card">
<div id="opp_container">
<div class="opp_error-card">
<h1> Error </h1>
<div class="body">
<div class="opp_body">
<p> Unfortunately there was a problem retrieving information for this asset. It may work if you try again.<p>
<p>Alternatively, please contact <a href="mailto:[email protected]" target="_top">OPP Support</a>
for help with further troubleshooting.</p>


<div>
<input class="collapse" id="error" type="checkbox" >
<input class="opp_collapse" id="error" type="checkbox" >
<label for="error">Error Message</label>
<div class="collapse-body">
<div class="opp_collapse-body">
<pre>
<code>
{JSON.stringify(opts.error, ["message", "arguments", "type", "name", "status", "errors"], 4)}
Expand All @@ -39,13 +39,13 @@
</div>
</div>

<div class="footer-logo">
<div class="opp_footer-logo">
<p>Powered by </p> <img src="https://s3-eu-west-1.amazonaws.com/copyrighthub-matrix-images/opp-logo.png"></img>
</div>
</div>
</div>
<style>
.error_card {
.opp_error-card {
font-family: 'Signika', sans-serif;
position:relative;
width:80%;
Expand All @@ -58,31 +58,31 @@
box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

.error_card h1 {
.opp_error-card h1 {
background: #DADFE1;
border-bottom: solid 1px;
border-color: #6C7A89;
padding-left:10px;
}

.error_card a {
.opp_error-card a {
color: #737373;
}

.error_card .body {
.opp_error-card .opp_body {
margin: 0 20px;
}

.error_card .footer {
.opp_error-card .opp_footer {
font-size: 12px;
margin: 0 20px;
}

.collapse {
.opp_collapse {
display: none;
}

.collapse + label {
.opp_collapse + label {
background: #DADFE1;
border: 1px solid #6C7A89;
padding: 2px;
Expand All @@ -95,15 +95,15 @@
box-shadow: 2px 2px 9px rgba(0,0,0,0.3);
}

.collapse + label + .collapse-body {
.opp_collapse + label + .opp_collapse-body {
display: none;
}

.collapse:checked + label + .collapse-body {
.opp_collapse:checked + label + .opp_collapse-body {
display: block;
}

.collapse + label:before {
.opp_collapse + label:before {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
Expand All @@ -118,11 +118,11 @@
margin-right: 5px;
}

.collapse:checked + label:before {
.opp_collapse:checked + label:before {
content:"\25BC";
}

.collapse-body{
.opp_collapse-body{
height: 200px;
overflow: auto;
background: #eee;
Expand Down

0 comments on commit 09b646d

Please sign in to comment.