Skip to content

[WIP] Add Mobile CSS #13

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 7, 2019
Merged

[WIP] Add Mobile CSS #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion package-lock.json
View file
Open in desktop

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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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