Skip to content

Commit 754b2fe

Browse files
author
Ari
committed
Lots of work on mobile styling, add collapsible
Still quite a ways to go, but looking good.
1 parent 41faced commit 754b2fe

File tree

6 files changed

+203
-53
lines changed

6 files changed

+203
-53
lines changed

‎package-lock.json

+2-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

-1
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626
"@creativebulma/bulma-collapsible": "^1.0.4",
2727
"bulma-switch": "^2.0.0",
2828
"cool-checkboxes-for-bulma.io": "^1.1.0",
29-
"lodash": "^4.17.11",
3029
"vue": "^2.6.10"
3130
}
3231
}

‎src/index.html

+80-41
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,20 @@
2626
<br>
2727
<img src="assets/cc-logo_white.png" style="width: 20%; margin-left: 5%">
2828
</header>
29-
<div class="container site-container" id="chooser-app">
30-
<br>
31-
<h1 class="title is-1">CC License Chooser</h1>
32-
<div align="center">
29+
<div class="site-container" id="chooser-app">
30+
<h1 class="site-title">CC License Chooser</h1>
31+
<div align="center" class="onmobile-hide" style="margin-bottom: .8%">
3332
<b>Tip:</b> You can click any <img class="modal-icon" src="assets/info-icon.svg" title="Except this one ;)">
3433
icons you see to get more information!
35-
</div> <br>
34+
</div>
3635
<div class="container" id="license-chooser">
37-
<p align="center">
36+
<p align="center" class="onmobile-hide">
3837
Have a work you want to license with the Creative Commons plaform, <br>
3938
but not sure which one is right for you? Use our license chooser!
4039
</p>
4140
<p align="center" style="display: none;">
4241
Confused? Check out the "<b>Need Help?</b>" section just below!
43-
</p> <br>
42+
</p>
4443
<div class="columns">
4544
<!--
4645
<div class="column" id="chooser-controls-radio">
@@ -126,12 +125,14 @@ <h4 class="title is-4">
126125
</span>
127126
<div class="control" style="margin-left: 9%; padding-top: 1%;">
128127
<div class="columns is-gapless">
129-
<div class="field column is-one-fifth">
130-
<label for="allow-adaptations-switch">No</label>
131-
<input id="allow-adaptations-switch" type="checkbox"
132-
name="allow-adaptations-switch" class="switch is-thin"
133-
checked="checked" onchange="switch_callback(this)">
134-
<label for="allow-adaptations-switch">Yes</label>
128+
<div class="column is-one-fifth">
129+
<div class="field choosercontrol-switch">
130+
<label for="allow-adaptations-switch">No</label>
131+
<input id="allow-adaptations-switch" type="checkbox"
132+
name="allow-adaptations-switch" class="switch is-thin"
133+
checked="checked" onchange="switch_callback(this)">
134+
<label for="allow-adaptations-switch">Yes</label>
135+
</div>
135136
</div>
136137
<div class="field column is-pulled-left" style="display: inline;">
137138
<p class="control is-pulled-left">
@@ -185,7 +186,7 @@ <h4 class="title is-4">
185186
<label for="allow-commercial-switch">Yes</label>
186187
</div>
187188
</div>
188-
</div> <br><br>
189+
</div>
189190
</div><!--
190191
<div class="column" id="chooser-controls-images">
191192
<p align="center">Changes to the options below will affect the license choice to the right.</p> <br><br>
@@ -234,27 +235,31 @@ <h4 class="title is-4">
234235
</div>
235236
</div> <br><br>
236237
</div>-->
237-
<div class="column" align="center">
238-
<h3 class="title is-3">Your License!</h3> <br><br>
238+
<div class="column selected-license" align="center">
239+
<h3 class="title is-3">Your License!</h3>
239240
<a v-bind:href="chooser.selected_license_link" align="center">{{chooser.selected_license}}</a> <br>
240-
<p>{{chooser.selected_license_short}}</p> <br>
241-
<span id="license-chooser-icons">
241+
<p>{{chooser.selected_license_short}}</p>
242+
<div id="license-chooser-icons" class="selected-license-icons">
242243
<img src="assets/cc.svg" class="chooser-license-icon" id="cc-logo-icon">
243244
<img src="assets/license-icons/cc-by_icon.svg" class="chooser-license-icon" id="attribution-icon">
244245
<img src="assets/license-icons/cc-nc_icon.svg" class="chooser-license-icon" id="commercial-icon">
245246
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" class="chooser-license-icon" id="adaptations-icon">
246-
</span>
247+
</div>
247248
</div>
248249
</div>
249250
</div>
250251
<hr>
251252
<div class="container" id="education-content">
252-
<h1 class="title is-1">Confused? Need Help?</h1>
253+
<h1 class="title site-title">Confused? Need Help?</h1>
253254
<p align="center">You can click the buttons below to get answers to the questions on them!</p>
254255
<br>
255256
<div class="columns" id="questions-buttons">
256257
<div class="column is-one-half">
257-
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q1')">What Are Creative Commons Licenses?</a><br>
258+
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q1')">
259+
<p class="button-text">
260+
What Are Creative Commons Licenses?
261+
</p>
262+
</a><br>
258263
<div id="modal-q1" class="modal">
259264
<div class="modal-background" onclick="destroy_modal('q1')"></div>
260265
<div class="modal-card">
@@ -281,7 +286,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
281286
</section>
282287
</div>
283288
</div>
284-
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q3')">How do the Licenses Work?</a><br>
289+
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q3')">
290+
<p class="button-text">
291+
How do the Licenses Work?
292+
</p>
293+
</a><br>
285294
<div id="modal-q3" class="modal">
286295
<div class="modal-background" onclick="destroy_modal('q3')"></div>
287296
<div class="modal-card">
@@ -335,7 +344,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
335344
</section>
336345
</div>
337346
</div>
338-
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q5')">Want Public Domain Instead?</a>
347+
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q5')">
348+
<p class="button-text">
349+
Want Public Domain Instead?
350+
</p>
351+
</a>
339352
<div id="modal-q5" class="modal">
340353
<div class="modal-background" onclick="destroy_modal('q5')"></div>
341354
<div class="modal-card">
@@ -361,7 +374,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
361374
</div>
362375
</div>
363376
<div class="column is-one-half">
364-
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q2')">Considerations Before Licensing</a><br>
377+
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q2')">
378+
<p class="button-text">
379+
Considerations Before Licensing
380+
</p>
381+
</a><br>
365382
<div id="modal-q2" class="modal">
366383
<div class="modal-background" onclick="destroy_modal('q2')"></div>
367384
<div class="modal-card">
@@ -393,7 +410,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
393410
</section>
394411
</div>
395412
</div>
396-
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q4')">How do I Formally License my Work?</a><br>
413+
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q4')">
414+
<p class="button-text">
415+
How do I Formally License my Work?
416+
</p>
417+
</a><br>
397418
<div id="modal-q4" class="modal">
398419
<div class="modal-background" onclick="destroy_modal('q4')"></div>
399420
<div class="modal-card">
@@ -441,7 +462,11 @@ <h1 class="title is-1">Confused? Need Help?</h1>
441462
</section>
442463
</div>
443464
</div>
444-
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q6')">The Six CC Licenses</a>
465+
<a class="button is-light is-large is-fullwidth" onclick="spawn_modal('q6')">
466+
<p class="button-text">
467+
The Six CC Licenses
468+
</p>
469+
</a>
445470
<div id="modal-q6" class="modal">
446471
<div class="modal-background" onclick="destroy_modal('q6')"></div>
447472
<div class="modal-card">
@@ -513,50 +538,63 @@ <h1 class="title is-1">Confused? Need Help?</h1>
513538
</div>
514539
<div class="column is-one-third">
515540
<div class="edu-icons-section">
516-
<img src="assets/license-icons/cc-by_icon.svg">
517-
Attribution (BY) <br>
518-
<p>You must attribute the work in the manner specified by the author or licensor.</p> <br>
541+
<div class="edu-icons-section-heading">
542+
<img src="assets/license-icons/cc-by_icon.svg">
543+
Attribution (BY)
544+
</div>
545+
<p>You must attribute the work in the manner specified by the author or licensor.</p>
519546
</div>
520547
<div class="edu-icons-section">
521-
<img src="assets/license-icons/cc-nd_icon.svg">
522-
NoDerivatives (ND)
548+
<div class="edu-icons-section-heading">
549+
<img src="assets/license-icons/cc-nd_icon.svg">
550+
NoDerivatives (ND)
551+
</div>
523552
<p>
524553
You may not create derivatives of the licensed work.
525554
</p>
526555
<p hidden>
527556
The licensor permits others to copy, distribute and transmit only unaltered copies of the work --
528-
not derivative works based on it.</p><br>
557+
not derivative works based on it.</p>
529558
</div>
530559
</div>
531560
<div class="column is-one-third">
532561
<div class="edu-icons-section">
533-
<img src="assets/license-icons/cc-sa_icon.svg">
534-
ShareAlike (SA)
562+
<div class="edu-icons-section-heading">
563+
<img src="assets/license-icons/cc-sa_icon.svg">
564+
ShareAlike (SA)
565+
</div>
535566
<p>
536567
You may create and distribute derivative works, but only under the same or a compatible license.
537568
</p>
538569
<p hidden>
539570
The licensor permits others to distribute derivative works, only under the same
540-
license or one compatible with the one that governs the licensor's work.</p><br>
571+
license or one compatible with the one that governs the licensor's work.</p>
541572
</div>
542573
<div class="edu-icons-section">
543-
<img src="assets/license-icons/cc-nc_icon.svg">
544-
NonCommercial (NC)
574+
<div class="edu-icons-section-heading">
575+
<img src="assets/license-icons/cc-nc_icon.svg">
576+
NonCommercial (NC)
577+
</div>
545578
<p>
546579
The licensor permits others to copy, distribute and transmit the work. In return,
547580
licensees may not use the work for commercial purposes -- unless they get the
548-
licensor's permission.</p><br>
581+
licensor's permission.</p>
549582
</div>
550583
</div>
551584
</div>
552585
</div>
553586
<hr>
587+
<button class="collapsible" id="html-generator-dropdown">
588+
<p>
589+
Have a Web Page? Embed your License Info!
590+
</p>
591+
</button>
592+
<!--
554593
<div class="" id="html-generator-dropdown" style="border-width: 2px; border-style: solid; padding: 1.5%;">
555594
<h1 class="title is-1">This is the dropdown click area</h1>
556-
</div> <br>
557-
<div class="" id="html-generator">
595+
</div> <br>-->
596+
<div class="content" id="html-generator">
558597
<div id="html-generator-generated">
559-
<h1 class="title is-2">Have a web page? Embed your license info!</h1>
560598
<span id="html-generator-generated-richtext-container">
561599
[Work] by [Author] is licenced under <a>CC BY NC 4.0</a>
562600
<span id="html-generator-richtext-container-icons" class="generated-icons">
@@ -662,6 +700,7 @@ <h1 class="title is-2">Have a web page? Embed your license info!</h1>
662700
</div>-->
663701
</div>
664702
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
703+
<script src="../node_modules/@creativebulma/bulma-collapsible/dist/js/bulma-collapsible.min.js"></script>
665704
<script type="text/javascript" src="index.js"></script>
666705
<script type="text/javascript" src="scripts/page-controls.js"></script>
667706
<script type="text/javascript" src="scripts/HTML-generator.js"></script>

‎src/scripts/page-controls.js

+15
Original file line numberDiff line numberDiff line change
@@ -26,4 +26,19 @@ function destroy_modal(modal_id) {
2626

2727
function copy_text_to_clipboard() {
2828

29+
}
30+
31+
var coll = document.getElementsByClassName("collapsible");
32+
var i;
33+
34+
for (i = 0; i < coll.length; i++) {
35+
coll[i].addEventListener("click", function() {
36+
this.classList.toggle("active");
37+
var content = this.nextElementSibling;
38+
if (content.style.display === "block") {
39+
content.style.display = "none";
40+
} else {
41+
content.style.display = "block";
42+
}
43+
});
2944
}

‎src/styles/sass/bulma-mods.scss

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1-
@charset "utf-8";
1+
/* Helpful Links
2+
scss mixin syntax example: https://github.com/jgthms/bulma/issues/351
3+
https://github.com/jgthms/bulma/issues/1818
4+
*/
25

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

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

17+
1218
// Import only what you need from Bulma
1319
@import "../../../node_modules/bulma/sass/utilities/_all.sass";
1420
@import "../../../node_modules/bulma/sass/base/_all.sass";

0 commit comments

Comments
 (0)