Skip to content

Commit aadeeb8

Browse files
possumbilitiespossumbilities
authored
Merge pull request #567 from creativecommons/ux-boost
improve ux, add copy behavior, add short/long name toggle behavior
2 parents 9d8ceae + a067a55 commit aadeeb8

File tree

3 files changed

+376
-83
lines changed

3 files changed

+376
-83
lines changed

‎src/index.html

Lines changed: 77 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -277,27 +277,27 @@ <h1>Choose a License for Your Work</h1>
277277

278278
<div>
279279
<label for="title">Title of work</label>
280-
<input type="text" id="title" name="title" value="title" />
280+
<input type="text" id="title" name="title" placeholder="title" />
281281
</div>
282282

283283
<div>
284284
<label for="creator">Creator of work</label>
285-
<input type="text" id="creator" name="creator" value="creator" />
285+
<input type="text" id="creator" name="creator" placeholder="creator" />
286286
</div>
287287

288288
<div>
289289
<label for="work-link">Link to work</label>
290-
<input type="text" id="work-link" name="work-link" value="work link" />
290+
<input type="text" id="work-link" name="work-link" placeholder="work link" />
291291
</div>
292292

293293
<div>
294294
<label for="creator-link">Title of work</label>
295-
<input type="text" id="creator-link" name="creator-link" value="creator link" />
295+
<input type="text" id="creator-link" name="creator-link" placeholder="creator link" />
296296
</div>
297297

298298
<div>
299299
<label for="work-creation-year">Year of creation</label>
300-
<input type="text" id="work-creation-year" name="work-creation-year" value="1999" />
300+
<input type="text" id="work-creation-year" name="work-creation-year" placeholder="1999" />
301301
</div>
302302

303303
<div id="tool-rec-details">
@@ -331,6 +331,8 @@ <h2>Recommended Choice</h2>
331331

332332
<article class="tool">
333333

334+
<p>Please complete the form, to get a choice!</p>
335+
334336
<!-- <header>
335337
<h3>CC-BY 4.0</h3>
336338
<span class="license-icons">
@@ -360,7 +362,7 @@ <h4>Creative Commons Attribution 4.0 International</h4>
360362

361363
<div id="mark-your-work">
362364
<header>
363-
<h2>Mark Your Work</h2>
365+
<h3>Mark Your Work</h3>
364366
<p>Choose the kind of work to get appropriate license code or public domain marking.</p>
365367
</header>
366368

@@ -390,7 +392,7 @@ <h2>Mark Your Work</h2>
390392
<details class="format">
391393
<summary>HTML</summary>
392394

393-
<p class="html mark">[contextually formatted mark here]</p>
395+
<textarea class="html mark" readonly="true">[contextually formatted mark here]</textarea>
394396

395397
<footer>
396398
<div>
@@ -413,7 +415,7 @@ <h2>Mark Your Work</h2>
413415
<p>Copy the text below and paste it on the title and/or copyright page of your print work or presentation, or in the credits of your media.</p>
414416

415417
<article>
416-
<details class="format">
418+
<details class="format" open>
417419
<summary>Plain Text</summary>
418420

419421
<p class="plain-text mark">[contextually formatted mark here]</p>
@@ -553,8 +555,10 @@ <h4>CC0 1.0 Universal</h4>
553555
</div>
554556

555557
<dl class="conditions-definitions">
556-
<dt class="icon-attach cc-zero">CC0</dt>
557-
<dd>This work has been marked as dedicated to the public domain.</dd>
558+
<div>
559+
<dt class="icon-attach cc-zero">CC0</dt>
560+
<dd>This work has been marked as dedicated to the public domain.</dd>
561+
</div>
558562
</dl>
559563

560564
<a href="https://creativecommons.org/publicdomain/zero/1.0/?ref=chooser-v2">See the License Deed</a>
@@ -579,8 +583,10 @@ <h4>Creative Commons Attribution 4.0 International</h4>
579583
</div>
580584

581585
<dl class="conditions-definitions">
582-
<dt class="icon-attach cc-by">BY</dt>
583-
<dd>Credit must be given to you, the creator.</dd>
586+
<div>
587+
<dt class="icon-attach cc-by">BY</dt>
588+
<dd>Credit must be given to you, the creator.</dd>
589+
</div>
584590
</dl>
585591

586592
<a href="https://creativecommons.org/licenses/by/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -608,11 +614,15 @@ <h4>Creative Commons Attribution-ShareAlike 4.0 International</h4>
608614
</div>
609615

610616
<dl class="conditions-definitions">
611-
<dt class="icon-attach cc-by">BY</dt>
612-
<dd>Credit must be given to you, the creator.</dd>
617+
<div>
618+
<dt class="icon-attach cc-by">BY</dt>
619+
<dd>Credit must be given to you, the creator.</dd>
620+
</div>
613621

614-
<dt class="icon-attach cc-sa">SA</dt>
615-
<dd>Adaptations must be shared under the same terms.</dd>
622+
<div>
623+
<dt class="icon-attach cc-sa">SA</dt>
624+
<dd>Adaptations must be shared under the same terms.</dd>
625+
</div>
616626
</dl>
617627

618628
<a href="https://creativecommons.org/licenses/by-sa/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -640,11 +650,16 @@ <h4>Creative Commons Attribution-NoDerivatives 4.0 International</h4>
640650
</div>
641651

642652
<dl class="conditions-definitions">
643-
<dt class="icon-attach cc-by">BY</dt>
644-
<dd>Credit must be given to you, the creator.</dd>
645653

646-
<dt class="icon-attach cc-nd">ND</dt>
647-
<dd>No derivatives or adaptations of your work are permitted.</dd>
654+
<div>
655+
<dt class="icon-attach cc-by">BY</dt>
656+
<dd>Credit must be given to you, the creator.</dd>
657+
</div>
658+
659+
<div>
660+
<dt class="icon-attach cc-nd">ND</dt>
661+
<dd>No derivatives or adaptations of your work are permitted.</dd>
662+
</div>
648663
</dl>
649664

650665
<a href="https://creativecommons.org/licenses/by-nd/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -672,14 +687,18 @@ <h4>Creative Commons Attribution-NonCommercial 4.0 International</h4>
672687
</div>
673688

674689
<dl class="conditions-definitions">
675-
<dt class="icon-attach cc-by">BY</dt>
676-
<dd>Credit must be given to you, the creator.</dd>
690+
<div>
691+
<dt class="icon-attach cc-by">BY</dt>
692+
<dd>Credit must be given to you, the creator.</dd>
693+
</div>
677694

678-
<dt class="icon-attach cc-nc">NC</dt>
679-
<dd>
680-
Only noncommercial use of your work is permitted.
681-
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
682-
</dd>
695+
<div>
696+
<dt class="icon-attach cc-nc">NC</dt>
697+
<dd>
698+
Only noncommercial use of your work is permitted.
699+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
700+
</dd>
701+
</div>
683702

684703

685704
</dl>
@@ -712,17 +731,23 @@ <h4>Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</h4>
712731
</div>
713732

714733
<dl class="conditions-definitions">
715-
<dt class="icon-attach cc-by">BY</dt>
716-
<dd>Credit must be given to you, the creator.</dd>
734+
<div>
735+
<dt class="icon-attach cc-by">BY</dt>
736+
<dd>Credit must be given to you, the creator.</dd>
737+
</div>
717738

718-
<dt class="icon-attach cc-nc">NC</dt>
719-
<dd>
720-
Only noncommercial use of your work is permitted.
721-
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
722-
</dd>
739+
<div>
740+
<dt class="icon-attach cc-nc">NC</dt>
741+
<dd>
742+
Only noncommercial use of your work is permitted.
743+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
744+
</dd>
745+
</div>
723746

724-
<dt class="icon-attach cc-sa">SA</dt>
725-
<dd>Adaptations must be shared under the same terms.</dd>
747+
<div>
748+
<dt class="icon-attach cc-sa">SA</dt>
749+
<dd>Adaptations must be shared under the same terms.</dd>
750+
</div>
726751
</dl>
727752

728753
<a href="https://creativecommons.org/licenses/by-nc-sa/4.0/?ref=chooser-v2">See the License Deed</a>
@@ -753,24 +778,30 @@ <h4>Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</
753778
</div>
754779

755780
<dl class="conditions-definitions">
756-
<dt class="icon-attach cc-by">BY</dt>
757-
<dd>Credit must be given to you, the creator.</dd>
781+
<div>
782+
<dt class="icon-attach cc-by">BY</dt>
783+
<dd>Credit must be given to you, the creator.</dd>
784+
</div>
758785

759-
<dt class="icon-attach cc-nc">NC</dt>
760-
<dd>
761-
Only noncommercial use of your work is permitted.
762-
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
763-
</dd>
786+
<div>
787+
<dt class="icon-attach cc-nc">NC</dt>
788+
<dd>
789+
Only noncommercial use of your work is permitted.
790+
<span>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</span>
791+
</dd>
792+
</div>
764793

765-
<dt class="icon-attach cc-nd">ND</dt>
766-
<dd>No derivatives or adaptations of your work are permitted.</dd>
794+
<div>
795+
<dt class="icon-attach cc-nd">ND</dt>
796+
<dd>No derivatives or adaptations of your work are permitted.</dd>
797+
</div>
767798
</dl>
768799

769800
<a href="https://creativecommons.org/licenses/by-nc-nd/4.0/?ref=chooser-v2">See the License Deed</a>
770801
</template>
771802

772803
<template id="plain-text" class="mark">
773-
<p>{{title}} © {{year}} by {{creator}} is {{typeAsVerb}} {{toolShort}}. To view a copy of this {{type}}, visit {{toolURL}}</p>
804+
<p>{{title}} © {{year}} by {{creator}} is {{typeAsVerb}} {{toolName}}. To view a copy of this {{type}}, visit {{toolURL}}</p>
774805
</template>
775806

776807
</body>

0 commit comments

Comments
 (0)