Skip to content

Commit 2fe1329

Browse files
possumbilitiespossumbilities
authored
improve input styles, add missing info, add empty placeholder, enable help section
1 parent aadeeb8 commit 2fe1329

File tree

3 files changed

+125
-32
lines changed

3 files changed

+125
-32
lines changed

‎src/index.html‎

Lines changed: 60 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -275,6 +275,8 @@ <h1>Choose a License for Your Work</h1>
275275
<fieldset id="attribution-details">
276276
<legend>Attribution details (optional)</legend>
277277

278+
<span>This helps others attribute your work to you, and fills in machine-readable code.</span>
279+
278280
<div>
279281
<label for="title">Title of work</label>
280282
<input type="text" id="title" name="title" placeholder="title" />
@@ -291,7 +293,7 @@ <h1>Choose a License for Your Work</h1>
291293
</div>
292294

293295
<div>
294-
<label for="creator-link">Title of work</label>
296+
<label for="creator-link">Link to Creator Profile</label>
295297
<input type="text" id="creator-link" name="creator-link" placeholder="creator link" />
296298
</div>
297299

@@ -326,13 +328,15 @@ <h1>Choose a License for Your Work</h1>
326328
<!-- <button>submit</button> -->
327329

328330
<aside>
331+
<div id="empty">
332+
<p>Waiting for required fields...</p>
333+
</div>
334+
329335
<div id="tool-recommendation">
330336
<h2>Recommended Choice</h2>
331337

332338
<article class="tool">
333339

334-
<p>Please complete the form, to get a choice!</p>
335-
336340
<!-- <header>
337341
<h3>CC-BY 4.0</h3>
338342
<span class="license-icons">
@@ -436,33 +440,61 @@ <h3>Mark Your Work</h3>
436440
<div class="help">
437441
<h2>Confused? Need Help?</h2>
438442

439-
<h3>What are Creative Commons licenses?</h3>
440-
<p>Creative Commons licenses are legal tools that help you grant copyright permissions to the general public. Our CC legal tools include <a href="https://creativecommons.org/licenses/" target="_blank" rel="noopener noreferrer">six different licenses</a> and <a href="https://creativecommons.org/share-your-work/public-domain/cc0/" target="_blank" rel="noopener noreferrer">one public domain dedication tool</a>. It is important to specify which one of the 7 legal tools you are applying to your material. The license chooser can help you decide which license is right for you.</p>
441-
<p>CC licenses may be applied to any type of copyrightable work. The only types of works for which CC does not recommend its licenses are computer software and hardware, where we recommend a standard free software license instead. For works that are already in the public domain we recommend that you mark them with the <a href="https://creativecommons.org/about/pdm" target="_blank" rel="noopener noreferrer">Public Domain Mark</a>. If you hold the rights to a work but would like to place it into the public domain, you can use the Chooser to select CC0.</p>
442-
443+
<details name="help">
444+
<summary>What are Creative Commons licenses?</summary>
445+
<p>Creative Commons licenses are legal tools that help you grant copyright permissions to the general public. Our CC legal tools include <a href="https://creativecommons.org/licenses/" target="_blank" rel="noopener noreferrer">six different licenses</a> and <a href="https://creativecommons.org/share-your-work/public-domain/cc0/" target="_blank" rel="noopener noreferrer">one public domain dedication tool</a>. It is important to specify which one of the 7 legal tools you are applying to your material. The license chooser can help you decide which license is right for you.</p>
446+
<p>CC licenses may be applied to any type of copyrightable work. The only types of works for which CC does not recommend its licenses are computer software and hardware, where we recommend a standard free software license instead. For works that are already in the public domain we recommend that you mark them with the <a href="https://creativecommons.org/about/pdm" target="_blank" rel="noopener noreferrer">Public Domain Mark</a>. If you hold the rights to a work but would like to place it into the public domain, you can use the Chooser to select CC0.</p>
447+
</details>
443448

444-
<h3>How to apply a Creative Commons license</h3>
445-
<p>You can license your work by marking it with the specific CC license you choose. This marking can be as simple as a bit of text stating the license in a copyright notice, or as complex as embedding the license information on your website using the HTML code associated with the particular license. We strongly recommend including a link to the applicable license (e.g., <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">https://creativecommons.org/licenses/by/4.0/</a>).</p>
446-
449+
<details name="help">
450+
<summary>How to apply a Creative Commons license</summary>
451+
<p>You can license your work by marking it with the specific CC license you choose. This marking can be as simple as a bit of text stating the license in a copyright notice, or as complex as embedding the license information on your website using the HTML code associated with the particular license. We strongly recommend including a link to the applicable license (e.g., <a href="https://creativecommons.org/licenses/by/4.0/" target="_blank" rel="noopener noreferrer">https://creativecommons.org/licenses/by/4.0/</a>).</p>
452+
</details>
447453

448-
<h3>What should I consider?</h3>
449-
<p>As a creator licensing a work, among <a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors" target="_blank" rel="noopener noreferrer">other considerations</a>, you should:</p>
450-
<ul>
451-
<li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Remember_the_license_may_not_be_revoked." target="_blank" rel="noopener noreferrer">Remember that once you have applied a CC license, you cannot revoke it</a>.</li>
452-
<li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Think_about_how_you_want_the_material_to_be_used." target="_blank" rel="noopener noreferrer">Choose your license based on how you want the material to be used</a>.</li>
453-
<li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Specify_attribution_information_if_desired." target="_blank" rel="noopener noreferrer">Let people know how to credit you (or whether you want credit at all)</a>.</li>
454-
</ul>
454+
<details name="help">
455+
<summary>What should I consider?</summary>
456+
<p>As a creator licensing a work, among <a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Considerations_for_licensors" target="_blank" rel="noopener noreferrer">other considerations</a>, you should:</p>
457+
<ul>
458+
<li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Remember_the_license_may_not_be_revoked." target="_blank" rel="noopener noreferrer">Remember that once you have applied a CC license, you cannot revoke it</a>.</li>
459+
<li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Think_about_how_you_want_the_material_to_be_used." target="_blank" rel="noopener noreferrer">Choose your license based on how you want the material to be used</a>.</li>
460+
<li><a href="https://wiki.creativecommons.org/wiki/Considerations_for_licensors_and_licensees#Specify_attribution_information_if_desired." target="_blank" rel="noopener noreferrer">Let people know how to credit you (or whether you want credit at all)</a>.</li>
461+
</ul>
462+
</details>
455463

464+
<details name="help">
465+
<summary>What do the icons mean?</summary>
466+
<p> The icons represent key features of the different CC license options: </p>
467+
<dl class="conditions-definitions">
468+
<div>
469+
<dt class="icon-attach cc-by">Attribution Required (BY)</dt>
470+
<dd>Credit must be given to you, the creator.</dd>
471+
</div>
472+
473+
<div>
474+
<dt class="icon-attach cc-nc">Commercial Use Not Allowed (NC/NonCommercial)</dt>
475+
<dd>
476+
Only noncommercial use of your work is permitted.
477+
<em>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</em>
478+
</dd>
479+
</div>
480+
481+
<div>
482+
<dt class="icon-attach cc-sa">Distributed on Same Terms (SA/ShareAlike)</dt>
483+
<dd>Adaptations must be shared under the same terms.</dd>
484+
</div>
485+
486+
<div>
487+
<dt class="icon-attach cc-nd">Modifying Not Allowed (ND/NoDerivatives)</dt>
488+
<dd>No derivatives or adaptations of your work are permitted.</dd>
489+
</div>
490+
</dl>
491+
</details>
456492

457-
<h3>What do the icons mean?</h3>
458-
<p> The icons represent key features of the different CC license options: </p>
459-
<p>[grid of icons and defintions here]</p>
460-
493+
<details name="help">
494+
<summary>What if I have other questions?</summary>
495+
<p>You can find a full list of our <a href="https://creativecommons.org/faq/" target="_blank" rel="noopener noreferrer">frequently asked questions</a> on our site. If your questions or concerns are not answered there, you can email us at <a href="mailto:legal@creativecommons.org" target="_blank" rel="noopener noreferrer">legal@creativecommons.org</a>.</p>
496+
</details>
461497

462-
<h3>What if I have other questions?</h3>
463-
<p>You can find a full list of our <a href="https://creativecommons.org/faq/" target="_blank" rel="noopener noreferrer">frequently asked questions</a> on our site. If your questions or concerns are not answered there, you can email us at <a href="mailto:legal@creativecommons.org" target="_blank" rel="noopener noreferrer">legal@creativecommons.org</a>.</p>
464-
465-
</ul>
466498
</div>
467499
</aside>
468500

@@ -696,7 +728,7 @@ <h4>Creative Commons Attribution-NonCommercial 4.0 International</h4>
696728
<dt class="icon-attach cc-nc">NC</dt>
697729
<dd>
698730
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>
731+
<em>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</em>
700732
</dd>
701733
</div>
702734

@@ -740,7 +772,7 @@ <h4>Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</h4>
740772
<dt class="icon-attach cc-nc">NC</dt>
741773
<dd>
742774
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>
775+
<em>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</em>
744776
</dd>
745777
</div>
746778

@@ -787,7 +819,7 @@ <h4>Creative Commons Attribution-NonCommercial-NoDerivatives 4.0 International</
787819
<dt class="icon-attach cc-nc">NC</dt>
788820
<dd>
789821
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>
822+
<em>Noncommercial means not primarily intended for or directed towards commercial advantage or monetary compensation.</em>
791823
</dd>
792824
</div>
793825

‎src/scripts.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -436,6 +436,23 @@ function renderMarkingFormats(state) {
436436
// console.log(parsedMark);
437437

438438

439+
// function to render "empty area"
440+
// if no valid tool from state.parts and/or state/current
441+
442+
function renderEmptyPlaceholder(state) {
443+
444+
if (state.props.tool == 'unknown' ) {
445+
document.querySelector('#empty').classList.remove('disable');
446+
console.log('show empty');
447+
}
448+
449+
else if (state.props.tool != 'unknown') {
450+
document.querySelector('#empty').classList.add('disable');
451+
console.log('hide empty');
452+
}
453+
454+
}
455+
439456
// function to render "mark your work",
440457
// if valid tool from state.parts and/or state.current
441458
// if attribution details input(s) filled out
@@ -580,6 +597,8 @@ function watchFieldsets(fieldsets, state) {
580597

581598
renderSteps(applyDefaults, state);
582599

600+
renderEmptyPlaceholder(state);
601+
583602
renderToolRec(state);
584603

585604
renderMarkYourWork(state);

‎src/style.css‎

Lines changed: 46 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,10 @@ dd {
7878
margin-left: .2em;
7979
}
8080

81+
dd span {
82+
display: block;
83+
}
84+
8185
ol li:has(.disable) {
8286
display: none;
8387
}
@@ -176,8 +180,19 @@ form#chooser label {
176180
font-weight: 400;
177181
}
178182

183+
form#chooser #attribution-details span {
184+
display: inline-block;
185+
padding: .7em 0;
186+
187+
font-size: .8em;
188+
line-height: 1.3;
189+
}
190+
191+
form#chooser #attribution-details div {
192+
margin-bottom: .5em;
193+
}
179194

180-
form#chooser #atrribution-details div, form#chooser #waive-your-copyright div {
195+
form#chooser #waive-your-copyright div {
181196
margin-bottom: 1em;
182197
}
183198

@@ -192,6 +207,18 @@ form#chooser #atrribution-details input::placeholder {
192207
opacity: .5;
193208
}
194209

210+
aside #empty {
211+
min-height: 15em;
212+
padding: 2em;
213+
214+
background: var(--vocabulary-brand-color-soft-turquoise);
215+
background: var(--vocabulary-neutral-color-lighter-gray);
216+
}
217+
218+
aside #empty p {
219+
font-size: 1.2em;
220+
}
221+
195222
#tool-recommendation {
196223
margin-bottom: 4em;
197224

@@ -310,10 +337,17 @@ details.format footer {
310337
padding: 1em;
311338
}
312339

313-
314340
details.format footer label {
315341
margin-left: .2em;
342+
}
343+
344+
details.format footer button {
345+
padding: .5em 1em;
316346

347+
background: #324C7F;
348+
color: white;
349+
border-radius: 3px;
350+
border: none;
317351
}
318352

319353
details.format footer button:hover {
@@ -325,6 +359,14 @@ body.chooser-page .content {
325359

326360
}
327361

362+
.help {
363+
margin-top: 4em;
364+
}
365+
366+
.help details {
367+
margin-bottom: 1em;
368+
}
369+
328370

329371

330372
@media (max-width: 705px) {
@@ -335,9 +377,9 @@ body.chooser-page .content {
335377

336378

337379
/* debug styles */
338-
.help {
380+
/* .help {
339381
display: none;
340-
}
382+
} */
341383

342384

343385
.panel {

0 commit comments

Comments
 (0)