Commit 081f5d24 authored by D Sal's avatar D Sal

FFS Finished

- Added Milestone capabilities
- Added and custom styled comments
parent 7ab67bce
......@@ -25,10 +25,44 @@
url: /forum-funding-system/proposals/getmonero-redesign.html
summary: Redesign the official getmonero.org website to make it more accessible and aesthetically pleasing.
author: rehrar
milestones:
- name: Milestone 1 - Front page & restructure
funds: 10% (~XMR 10.70)
done: April 28, 2017
status: completed
- name: Milestone 2 - Design
funds: 40% (~XMR 42.80)
done: July 1, 2017
status: completed
- name: Milestone 3 - Development
funds: 30% (~XMR 32.10)
done: July 1, 2017
status: completed
- name: Milestone 4 - Finishing touches
funds: 20% (~XMR 21.40)
done:
status: upcoming
- stage: Completed Proposals
proposals:
- name: What is Monero? is produced and open-sourced
url: /forum-funding-system/proposals/whatismonero-produced.html
summary: Make an introduction video to Monero.
author: savandra
\ No newline at end of file
author: savandra
milestones:
- name: Milestone 1 - Front page & restructure
funds: 10% (~XMR 10.70)
done: April 28, 2017
status: completed
- name: Milestone 2 - Design
funds: 40% (~XMR 42.80)
done: July 1, 2017
status: completed
- name: Milestone 3 - Development
funds: 30% (~XMR 32.10)
done: July 1, 2017
status: completed
- name: Milestone 4 - Finishing touches
funds: 20% (~XMR 21.40)
done:
status: upcoming
\ No newline at end of file
......@@ -9,14 +9,34 @@ layout: base
</div>
<!-- FULL WIDTH BLOCK -->
<section class="container full">
<div class="info-block text-adapt complete">
<div class="row center">
<div class="col-xs-12">
<h2>Progress</h2>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 progress-numbers">
<p class="progress-number-funded">100 XMR </p><span> /</span>
<p class="progress-number-goal">100 XMR</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="progress-bar">
<span style="width: 100%"></span>
</div>
</div>
<div class="col-xs-12 ffs-status">
<p>This project has been completed. The proposal is kept here both to celebrate the achievements of the Monero community, and for historical accuracy about what was accomplished.</p>
</div>
</div>
</div>
<div class="info-block text-adapt">
<div class="row center-xs">
<div class="col">
<h2>{{page.title}}</h2>
<p>by {{page.author}}</p>
<div class="ffs-status complete">
<p>This project has been completed. The proposal is kept here both to celebrate the achievements of the Monero community, and for historical accuracy about what was accomplished.</p>
</div>
</div>
</div>
<div>
......@@ -25,6 +45,15 @@ layout: base
</div>
</section>
<!-- END FULL WIDTH BLOCK -->
</div>
<!-- JAVASCRIPT FOR DISQUS -->
\ No newline at end of file
<section class="container full">
<div class="info-block">
<div class="row ">
<div class="col-xs-12">
<!-- JAVASCRIPT FOR DISQUS -->
<script data-isso="//xmrket.com/isso" src="//xmrket.com/isso/js/embed.min.js" data-isso-css="false"></script>
<section id="isso-thread"></section>
</div>
</div>
</div>
</section>
</div>
\ No newline at end of file
......@@ -9,8 +9,44 @@ layout: base
</div>
<!-- FULL WIDTH BLOCK -->
<section class="container full">
<section class="container full fr-contribute">
<div class="info-block text-adapt">
<div class="row center">
<div class="col-xs-12">
<h2>Funding Progress</h2>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 progress-numbers">
<p class="progress-number-funded">10 XMR </p><span> /</span>
<p class="progress-number-goal">100 XMR</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="progress-bar">
<span style="width: 75%"></span>
</div>
</div>
</div>
<div class="row center-xs">
<div class="tab col-xs-12">
<input id="tab-one" type="checkbox" name="tabs" class="accordion">
<label for="tab-one" class="accordion">Contribute</label>
<div class="tab-content">
<div class="row start-xs">
<div class="col-xs-12">
<p>In order to contribute to the cause of <strong>{{page.title}}</strong> all you have to do is the following:</p>
<p>Have a valid Monero address. If you don't have one, you can read on getting started!</p>
<p>Send the amount of XMR that you wish to contribute to the address: <strong>{{page.address}}</strong></p>
<p>Make sure that you enter a payment ID of <strong>{{page.paymentid}}</strong> in order for us to be able to assign your contribution to this specific project!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--div class="info-block text-adapt">
<div class="row center-xs">
<div class="col">
<h2>How to Contribute</h2>
......@@ -24,7 +60,7 @@ layout: base
<p>Make sure that you enter a payment ID of <strong>{{page.paymentid}}</strong> in order for us to be able to assign your contribution to this specific project!</p>
</div>
</div>
</div>
</div-->
</section>
<!-- END FULL WIDTH BLOCK -->
......@@ -43,6 +79,15 @@ layout: base
</div>
</section>
<!-- END FULL WIDTH BLOCK -->
</div>
<!-- JAVASCRIPT FOR DISQUS -->
\ No newline at end of file
<section class="container full comments">
<div class="info-block">
<div class="row ">
<div class="col-xs-12">
<!-- JAVASCRIPT FOR DISQUS -->
<script data-isso="//xmrket.com/isso" src="//xmrket.com/isso/js/embed.min.js" data-isso-css="false"></script>
<section id="isso-thread"></section>
</div>
</div>
</div>
</section>
</div>
\ No newline at end of file
......@@ -22,6 +22,15 @@ layout: base
</div>
</section>
<!-- END FULL WIDTH BLOCK -->
</div>
<!-- JAVASCRIPT FOR DISQUS -->
\ No newline at end of file
<section class="container full">
<div class="info-block">
<div class="row ">
<div class="col-xs-12">
<!-- JAVASCRIPT FOR DISQUS -->
<script data-isso="//xmrket.com/isso" src="//xmrket.com/isso/js/embed.min.js" data-isso-css="false"></script>
<section id="isso-thread"></section>
</div>
</div>
</div>
</section>
</div>
\ No newline at end of file
......@@ -23,6 +23,15 @@ layout: base
</div>
</section>
<!-- END FULL WIDTH BLOCK -->
</div>
<!-- JAVASCRIPT FOR DISQUS -->
\ No newline at end of file
<section class="container full">
<div class="info-block">
<div class="row ">
<div class="col-xs-12">
<!-- JAVASCRIPT FOR DISQUS -->
<script data-isso="//xmrket.com/isso" src="//xmrket.com/isso/js/embed.min.js" data-isso-css="false"></script>
<section id="isso-thread"></section>
</div>
</div>
</div>
</section>
</div>
\ No newline at end of file
......@@ -11,14 +11,65 @@ layout: base
<!-- FULL WIDTH BLOCK -->
<section class="container full">
<div class="info-block text-adapt inprogress">
<div class="row center">
<div class="col-xs-12">
<h2>Progress</h2>
</div>
</div>
<div class="row center-xs">
<div class="col-xs-12 progress-numbers">
<p class="progress-number-funded">100 XMR </p><span> /</span>
<p class="progress-number-goal">100 XMR</p>
</div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="progress-bar">
<span style="width: 100%"></span>
</div>
</div>
<div class="col-xs-12 ffs-status">
<p>This project has been funded and is being worked on. Keep an eye out here at the bottom of the proposal for updates.</p>
</div>
</div>
<div class="row center-xs milestones">
<div class="tab col-xs-12">
<input id="tab-one" type="checkbox" name="tabs" class="accordion">
<label for="tab-one" class="accordion">Milestones</label>
<div class="tab-content">
{% for toplevel in site.data.ffs %}
{% if toplevel.stage == 'Work in Progress' %}
{% for proposals in toplevel.proposals %}
{% if proposals.name == {{page.title}} %}
{% for milestones in proposals.milestones %}
<div class="row start-xs roadmap">
<div class="col-xs-1">
<span class="{{milestones.status}} ms-{{milestones.status}}"></span>
</div>
<div class="col-xs-11">
<p>{{milestones.name}}</p>
<p><span class="bold">Funds Awarded:</span> {{milestones.funds}}</p>
{% if milestones.done != nil %}
<p><span class="bold">Completion date:</span> {{milestones.done}}</p>
{%endif%}
</div>
</div>
{%endfor%}
{%endif%}
{%endfor%}
{%endif%}
{%endfor%}
</div>
</div>
</div>
</div>
<div class="info-block text-adapt">
<div class="row center-xs">
<div class="col">
<h2>{{page.title}}</h2>
<p>by {{page.author}}</p>
<div class="ffs-status inprogress">
<p>This project has been funded and is being worked on. Keep an eye out here at the bottom of the proposal for updates.</p>
</div>
</div>
</div>
<div>
......@@ -27,6 +78,19 @@ layout: base
</div>
</section>
<!-- END FULL WIDTH BLOCK -->
<section class="container full">
<div class="info-block">
<div class="row ">
<div class="col-xs-12">
<!-- JAVASCRIPT FOR DISQUS -->
<script data-isso="//xmrket.com/isso" src="//xmrket.com/isso/js/embed.min.js" data-isso-css="false"></script>
<section id="isso-thread"></section>
</div>
</div>
</div>
</section>
</div>
<!-- JAVASCRIPT FOR DISQUS -->
\ No newline at end of file
\ No newline at end of file
......@@ -976,6 +976,10 @@ a:hover, a:focus, a:active {
outline: 0;
}
textarea:focus, input:focus{
outline: none;
}
a, button, input, select, textarea, label, label:checked, label:focus {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent;
......@@ -987,6 +991,23 @@ img, video {max-width: 100%;}
video {width: 100%;}
::-webkit-input-placeholder {
color: #AAA;
}
::-moz-placeholder {
color: #AAA;
}
:-moz-placeholder {
color: #AAA;
}
:-ms-input-placeholder {
color: #AAA;
}
::-ms-input-placeholder {
color: #AAA;
}
.container, .container-fluid {
margin-left: auto;
margin-right: auto;
......@@ -1021,6 +1042,10 @@ video {width: 100%;}
box-shadow: 0 2px 4px rgba(50,50,93,.1);
}
.bold {
font-weight: 600;
}
code {
white-space: pre-wrap;
background-color: #fff1e8;
......@@ -2783,7 +2808,7 @@ footer {
border-radius: 50%;
}
.roadmap .tabPanel-content span {
.roadmap .tabPanel-content span, .roadmap .ms-completed, .roadmap .ms-upcoming {
width: 1.5rem;
height: 1.5rem;
text-align: center;
......@@ -3015,7 +3040,7 @@ footer {
padding-top: 0;
}
.roadmap .tabPanel-content span, .pre-roadmap li {
.roadmap .tabPanel-content span, .pre-roadmap li, .roadmap .ms-completed, .roadmap .ms-upcoming {
width: 1rem;
height: 1rem;
}
......@@ -3572,7 +3597,7 @@ footer {
color: #2f6f9f;
padding: 0.7rem;
border-radius: 0.2rem;
margin-top: 1rem;
margin-bottom: 1.5rem;
}
.ffs-status p {
......@@ -3582,14 +3607,103 @@ footer {
font-size: 0.85rem;
}
.ffs-status.complete {
.complete .ffs-status {
background-color: #d7e8d8;
}
.ffs-status.inprogress {
.inprogress .ffs-status {
background-color: #fef2d5;
}
.progress-numbers p {
display: inline-block;
padding-top: 1.2rem;
}
.progress-bar {
height: 1rem;
position: relative;
background: #edebed;
box-shadow: inset 0 -1px 1px rgba(0,0,0,.07);
margin: 1rem 0 1.5rem 0;
}
.progress-bar span {
display: block;
height: 100%;
background-color: rgb(229,115,37);
background-image: linear-gradient(
center bottom,
rgb(229,115,37) 37%,
rgb(231,129,58) 69%
);
box-shadow:
inset 0 2px 9px rgba(255,255,255,0.3),
inset 0 -2px 6px rgba(0,0,0,.07);
position: relative;
overflow: hidden;
}
.inprogress .progress-bar span, .complete .progress-bar span {
background-color: rgb(97,168,99);
background-image: linear-gradient(
center bottom,
rgb(97,168,99) 37%,
rgb(128,185,130) 69%
);
}
.fr-contribute .tab, .fr-contribute .tab:last-of-type, .milestones .tab, .milestones .tab:last-of-type {
border: none;
}
.fr-contribute .tab-content p, .milestones .tab-content p {
margin: 0;
text-align: left;
}
.fr-contribute label.accordion, .milestones label.accordion {
display: inline-block;
padding: 0 2rem 0 1rem;
border: 1px solid #ff7519;
margin: 0;
line-height: 2.7rem;
height: 2.7rem;
-webkit-transition: background .15s ease;
-moz-transition: background .15s ease;
-o-transition: background .15s ease;
transition: background .15s ease;
color: #ff7519;
text-transform: uppercase;
}
.fr-contribute label.accordion:hover, .fr-contribute label.accordion:focus, .fr-contribute input.accordion[type=checkbox]:checked + label, .milestones label.accordion:hover, .milestones label.accordion:focus, .milestones input.accordion[type=checkbox]:checked + label {
background-color: #ff7519;
color: #ffffff;
}
.fr-contribute label.accordion::after, .milestones label.accordion:after {
right: 1rem;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #ff7519;
}
.fr-contribute label.accordion:hover:after, .fr-contribute label.accordion:focus:after, .fr-contribute input.accordion[type=checkbox]:checked + label:after, .milestones label.accordion:hover:after, .milestones label.accordion:focus:after, .milestones input.accordion[type=checkbox]:checked + label:after {
border-top: 4px solid #ffffff;
}
.fr-contribute label.accordion:focus:after, .fr-contribute input.accordion[type=checkbox]:checked + label:after, .milestones label.accordion:focus:after, .milestones input.accordion[type=checkbox]:checked + label:after {
transform: rotateX(180deg);
}
.ms-completed, .ms-upcoming {
margin-top: 1rem !important;
}
.milestones .row.roadmap {
margin-top: 1.5rem;
}
@media only screen and (max-width: 75rem) {
......@@ -3679,6 +3793,10 @@ footer {
display: none;
}
.ms-completed, .ms-upcoming {
margin-top: 1.2rem !important;
}
}
@media only screen and (max-width: 41rem) {
......@@ -3697,9 +3815,21 @@ footer {
@media only screen and (max-width: 30rem) {
.ffs .mobile a.ffs-btn {
font-size: 1.25rem;
}
.ffs .mobile a.ffs-btn {
font-size: 1.25rem;
}
.milestones .roadmap .col-xs-1 {
-ms-flex-preferred-size: 16.667%;
flex-basis: 16.667%;
max-width: 16.667%;
}
.milestones .roadmap .col-xs-11 {
-ms-flex-preferred-size: 83.333%;
flex-basis: 83.333%;
max-width: 83.333%;
}
}
@media only screen and (max-width: 25rem) {
......@@ -3719,7 +3849,272 @@ footer {
}
}
/*************************ACCORDIAN********************************/
/*COMMENTS*/
#isso-thread * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#isso-thread a {
text-decoration: none;
}
#isso-thread {
padding: 0;
margin: 0;
}
#isso-thread > h4 {
color: #4c4c4c;
font-weight: bold;
padding-top: 0;
padding-bottom: 1rem;
font-family: 'Open Sans', sans-serif;
}
#isso-thread .textarea {
min-height: 3.625rem;
outline: 0;
}
.isso-comment {
max-width: 68rem;
padding-top: 0.95rem;
margin: 0.95rem auto;
}
.isso-comment:not(:first-of-type),
.isso-follow-up .isso-comment {
border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.isso-comment > div.avatar,
.isso-postbox > .avatar {
display: block;
float: left;
width: 4rem;
margin: 3px 0 0 0;
}
.isso-postbox > .avatar {
float: left;
margin: 0.3125rem 0.625rem 0 0.3125rem;
width: 3rem;
height: 3rem;
overflow: hidden;
}
.isso-comment > div.avatar > svg,
.isso-postbox > .avatar > svg {
max-width: 3rem;
max-height: 3rem;
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.isso-comment > div.text-wrapper {
display: block;
}
.isso-comment .isso-follow-up {
padding-left: calc(7% + 20px);
}
.isso-comment > div.text-wrapper > .isso-comment-header, .isso-comment > div.text-wrapper > .isso-comment-footer {
font-size: 0.95rem;
}
.isso-comment > div.text-wrapper > .isso-comment-header {
font-size: 0.85rem;
}
.isso-comment > div.text-wrapper > .isso-comment-header .spacer {
padding: 0 6px;
}
.isso-comment > div.text-wrapper > .isso-comment-header .spacer,
.isso-comment > div.text-wrapper > .isso-comment-header a.permalink,
.isso-comment > div.text-wrapper > .isso-comment-header .note,
.isso-comment > div.text-wrapper > .isso-comment-header a.parent {
color: gray !important;
font-weight: normal;
text-shadow: none !important;
}
.isso-comment > div.text-wrapper > .isso-comment-header .spacer:hover,
.isso-comment > div.text-wrapper > .isso-comment-header a.permalink:hover,
.isso-comment > div.text-wrapper > .isso-comment-header .note:hover,
.isso-comment > div.text-wrapper > .isso-comment-header a.parent:hover {
color: #ff7519 !important;
}
.isso-comment > div.text-wrapper > .isso-comment-header .note {
float: right;
}
.isso-comment > div.text-wrapper > .isso-comment-header .author {
font-weight: bold;
color: #4c4c4c;
}
.isso-comment > div.text-wrapper > .textarea-wrapper .textarea {
margin-top: 0.2rem;
}
.isso-comment > div.text-wrapper > div.text p {
padding-top: 0.5rem;
}
.isso-comment > div.text-wrapper > div.text p:last-child {
margin-bottom: 0.2rem;
}
.isso-comment > div.text-wrapper > div.text h1,
.isso-comment > div.text-wrapper > div.text h2,
.isso-comment > div.text-wrapper > div.text h3,
.isso-comment > div.text-wrapper > div.text h4,
.isso-comment > div.text-wrapper > div.text h5,
.isso-comment > div.text-wrapper > div.text h6 {
font-size: 130%;
font-weight: bold;
}
.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea {
width: 100%;
border: 1px solid #f0f0f0;
box-shadow: 0 0 2px #888;
}
.isso-comment > div.text-wrapper > .isso-comment-footer {
font-size: 0.80em;
color: gray !important;
clear: left;
}
.isso-comment > div.text-wrapper > .isso-comment-footer a {
font-weight: bold;
text-decoration: none;
}
.isso-comment > div.text-wrapper > .isso-comment-footer a:hover {
color: #ff7519 !important;
}
.isso-comment > div.text-wrapper > .isso-comment-footer > a {