Skip to content

Commit

Permalink
Lots of work on mobile styling, add collapsible
Browse files Browse the repository at this point in the history 
Still quite a ways to go, but looking good.
  • Loading branch information
Ari committed Jun 25, 2019
1 parent 41faced commit 754b2fe
Show file tree
Hide file tree
Showing 6 changed files with 203 additions and 53 deletions.
3 changes: 2 additions & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 0 additions & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@
"@creativebulma/bulma-collapsible": "^1.0.4",
"bulma-switch": "^2.0.0",
"cool-checkboxes-for-bulma.io": "^1.1.0",
"lodash": "^4.17.11",
"vue": "^2.6.10"
}
}
121 changes: 80 additions & 41 deletions src/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,21 +26,20 @@
<br>
<img src="assets/cc-logo_white.png" style="width: 20%; margin-left: 5%">
</header>
<div class="container site-container" id="chooser-app">
<br>
<h1 class="title is-1">CC License Chooser</h1>
<div align="center">
<div class="site-container" id="chooser-app">
<h1 class="site-title">CC License Chooser</h1>
<div align="center" class="onmobile-hide" style="margin-bottom: .8%">
<b>Tip:</b> You can click any <img class="modal-icon" src="assets/info-icon.svg" title="Except this one ;)">
icons you see to get more information!
</div> <br>
</div>
<div class="container" id="license-chooser">
<p align="center">
<p align="center" class="onmobile-hide">
Have a work you want to license with the Creative Commons plaform, <br>
but not sure which one is right for you? Use our license chooser!
</p>
<p align="center" style="display: none;">
Confused? Check out the "<b>Need Help?</b>" section just below!
</p> <br>
</p>
<div class="columns">
<!--
<div class="column" id="chooser-controls-radio">
Expand Down Expand Up @@ -126,12 +125,14 @@ <h4 class="title is-4">
</span>
<div class="control" style="margin-left: 9%; padding-top: 1%;">
<div class="columns is-gapless">
<div class="field column is-one-fifth">
<label for="allow-adaptations-switch">No</label>
<input id="allow-adaptations-switch" type="checkbox"
name="allow-adaptations-switch" class="switch is-thin"
checked="checked" onchange="switch_callback(this)">
<label for="allow-adaptations-switch">Yes</label>
<div class="column is-one-fifth">
<div class="field choosercontrol-switch">
<label for="allow-adaptations-switch">No</label>
<input id="allow-adaptations-switch" type="checkbox"
name="allow-adaptations-switch" class="switch is-thin"
checked="checked" onchange="switch_callback(this)">
<label for="allow-adaptations-switch">Yes</label>
</div>
</div>
<div class="field column is-pulled-left" style="display: inline;">
<p class="control is-pulled-left">
Expand Down Expand Up @@ -185,7 +186,7 @@ <h4 class="title is-4">
<label for="allow-commercial-switch">Yes</label>
</div>
</div>
</div> <br><br>
</div>
</div><!--
<div class="column" id="chooser-controls-images">
<p align="center">Changes to the options below will affect the license choice to the right.</p> <br><br>
Expand Down Expand Up @@ -234,27 +235,31 @@ <h4 class="title is-4">
</div>
</div> <br><br>
</div>-->
<div class="column" align="center">
<h3 class="title is-3">Your License!</h3> <br><br>
<div class="column selected-license" align="center">
<h3 class="title is-3">Your License!</h3>
<a v-bind:href="chooser.selected_license_link" align="center">{{chooser.selected_license}}</a> <br>
<p>{{chooser.selected_license_short}}</p> <br>
<span id="license-chooser-icons">
<p>{{chooser.selected_license_short}}</p>
<div id="license-chooser-icons" class="selected-license-icons">
<img src="assets/cc.svg" class="chooser-license-icon" id="cc-logo-icon">
<img src="assets/license-icons/cc-by_icon.svg" class="chooser-license-icon" id="attribution-icon">
<img src="assets/license-icons/cc-nc_icon.svg" class="chooser-license-icon" id="commercial-icon">
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" class="chooser-license-icon" id="adaptations-icon">
</span>
</div>
</div>
</div>
</div>
<hr>
<div class="container" id="education-content">
<h1 class="title is-1">Confused? Need Help?</h1>
<h1 class="title site-title">Confused? Need Help?</h1>
<p align="center">You can click the buttons below to get answers to the questions on them!</p>
<br>
<div class="columns" id="questions-buttons">
<div class="column is-one-half">
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q1')">What Are Creative Commons Licenses?</a><br>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q1')">
<p class="button-text">
What Are Creative Commons Licenses?
</p>
</a><br>
<div id="modal-q1" class="modal">
<div class="modal-background" onclick="destroy_modal('q1')"></div>
<div class="modal-card">
Expand All @@ -281,7 +286,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q3')">How do the Licenses Work?</a><br>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q3')">
<p class="button-text">
How do the Licenses Work?
</p>
</a><br>
<div id="modal-q3" class="modal">
<div class="modal-background" onclick="destroy_modal('q3')"></div>
<div class="modal-card">
Expand Down Expand Up @@ -335,7 +344,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q5')">Want Public Domain Instead?</a>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q5')">
<p class="button-text">
Want Public Domain Instead?
</p>
</a>
<div id="modal-q5" class="modal">
<div class="modal-background" onclick="destroy_modal('q5')"></div>
<div class="modal-card">
Expand All @@ -361,7 +374,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
</div>
</div>
<div class="column is-one-half">
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q2')">Considerations Before Licensing</a><br>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q2')">
<p class="button-text">
Considerations Before Licensing
</p>
</a><br>
<div id="modal-q2" class="modal">
<div class="modal-background" onclick="destroy_modal('q2')"></div>
<div class="modal-card">
Expand Down Expand Up @@ -393,7 +410,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q4')">How do I Formally License my Work?</a><br>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q4')">
<p class="button-text">
How do I Formally License my Work?
</p>
</a><br>
<div id="modal-q4" class="modal">
<div class="modal-background" onclick="destroy_modal('q4')"></div>
<div class="modal-card">
Expand Down Expand Up @@ -441,7 +462,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
</section>
</div>
</div>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q6')">The Six CC Licenses</a>
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q6')">
<p class="button-text">
The Six CC Licenses
</p>
</a>
<div id="modal-q6" class="modal">
<div class="modal-background" onclick="destroy_modal('q6')"></div>
<div class="modal-card">
Expand Down Expand Up @@ -513,50 +538,63 @@ <h1 class="title is-1">Confused? Need Help?</h1>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-by_icon.svg">
Attribution (BY) <br>
<p>You must attribute the work in the manner specified by the author or licensor.</p> <br>
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-by_icon.svg">
Attribution (BY)
</div>
<p>You must attribute the work in the manner specified by the author or licensor.</p>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nd_icon.svg">
NoDerivatives (ND)
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-nd_icon.svg">
NoDerivatives (ND)
</div>
<p>
You may not create derivatives of the licensed work.
</p>
<p hidden>
The licensor permits others to copy, distribute and transmit only unaltered copies of the work --
not derivative works based on it.</p><br>
not derivative works based on it.</p>
</div>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-sa_icon.svg">
ShareAlike (SA)
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-sa_icon.svg">
ShareAlike (SA)
</div>
<p>
You may create and distribute derivative works, but only under the same or a compatible license.
</p>
<p hidden>
The licensor permits others to distribute derivative works, only under the same
license or one compatible with the one that governs the licensor's work.</p><br>
license or one compatible with the one that governs the licensor's work.</p>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nc_icon.svg">
NonCommercial (NC)
<div class="edu-icons-section-heading">
<img src="assets/license-icons/cc-nc_icon.svg">
NonCommercial (NC)
</div>
<p>
The licensor permits others to copy, distribute and transmit the work. In return,
licensees may not use the work for commercial purposes -- unless they get the
licensor's permission.</p><br>
licensor's permission.</p>
</div>
</div>
</div>
</div>
<hr>
<button class="collapsible" id="html-generator-dropdown">
<p>
Have a Web Page? Embed your License Info!
</p>
</button>
<!--
<div class="" id="html-generator-dropdown" style="border-width: 2px; border-style: solid; padding: 1.5%;">
<h1 class="title is-1">This is the dropdown click area</h1>
</div> <br>
<div class="" id="html-generator">
</div> <br>-->
<div class="content" id="html-generator">
<div id="html-generator-generated">
<h1 class="title is-2">Have a web page? Embed your license info!</h1>
<span id="html-generator-generated-richtext-container">
[Work] by [Author] is licenced under <a>CC BY NC 4.0</a>
<span id="html-generator-richtext-container-icons" class="generated-icons">
Expand Down Expand Up @@ -662,6 +700,7 @@ <h1 class="title is-2">Have a web page? Embed your license info!</h1>
</div>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="../node_modules/@creativebulma/bulma-collapsible/dist/js/bulma-collapsible.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="scripts/page-controls.js"></script>
<script type="text/javascript" src="scripts/HTML-generator.js"></script>
Expand Down
15 changes: 15 additions & 0 deletions src/scripts/page-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,4 +26,19 @@ function destroy_modal(modal_id) {

function copy_text_to_clipboard() {

}

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
8 changes: 7 additions & 1 deletion src/styles/sass/bulma-mods.scss
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
@charset "utf-8";
/* Helpful Links
scss mixin syntax example: https://github.com/jgthms/bulma/issues/351
https://github.com/jgthms/bulma/issues/1818
*/

@charset "utf-8";
@import "../../../node_modules/bulma/sass/utilities/mixins.sass";
@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C600%2C700%7CRoboto+Condensed&ver=4.9.8");

$cc-orange: #ef9421;
Expand All @@ -9,6 +14,7 @@ $dark-grey: hsl(0, 0%, 0%);
$primary: $cc-orange;
$default: $cc-orange;


// Import only what you need from Bulma
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
@import "../../../node_modules/bulma/sass/base/_all.sass";
Expand Down
Loading

0 comments on commit 754b2fe

Please sign in to comment.