Skip to content

[WIP] Refactor to chosen license properties card #14

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 13 commits into from
Jul 3, 2019
Merged

[WIP] Refactor to chosen license properties card #14

Show file tree
Hide file tree
Changes from 12 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cba75c2
Revert "Get basic license card working, currently only cc-by supported"
Jun 26, 2019
9c5de4b
Update icon descriptions text, working on new icon title display meth…
Jun 28, 2019
67dd6db
Get basic selected license card system working
Jun 28, 2019
5cbc1d4
Get license icon setting working, license packs still need descriptions
Jun 28, 2019
01b7aab
Merge branch 'master' into chooser-license-properties-card
Jun 28, 2019
b9e1e6e
Add new chosen license designs
Jul 2, 2019
1cf30f9
Add more license descriptions, fix icon explanation title css
Jul 2, 2019
1fd1dca
Cleanup
Jul 2, 2019
387aab4
Some Cleanup
Jul 2, 2019
f4a7e74
Some More Cleanup
Jul 2, 2019
a52ae55
Merge remote-tracking branch 'origin/chooser-license-properties-card'…
Jul 2, 2019
3be60db
Update chooser modals, swap full and short selected license names
Jul 3, 2019
5a0c4f9
Swap share_adapt and license description sections
Jul 3, 2019
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
151 changes: 102 additions & 49 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,7 +157,7 @@ <h4 class="title is-4">
<div class="modal-background" onclick="destroy_modal('allow-commercial')"></div>
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Considerations Before Licensing</p>
<p class="modal-card-title">Allowing Commercial Uses</p>
<button class="delete" aria-label="close" onclick="destroy_modal('allow-commercial')"></button>
</header>
<section class="modal-card-body">
Expand All @@ -173,6 +173,14 @@ <h4 class="title is-4">
only.
</p> <br>
</section>
<footer class="modal-card-foot">
<p>
Curious what qualifies as a Commercial Use? Check out the
<a href="https://wiki.creativecommons.org/wiki/NonCommercial_interpretation">
CC wiki page on interpretation of Commercial Uses.
</a>
</p>
</footer>
</div>
</div>
</span>
Expand Down Expand Up @@ -234,33 +242,6 @@ <h4 class="title is-4">
</div>
</div> <br><br>
</div>-->
<div class="column">
<div class="card">
<h3 class="title is-3 selected-license-card-title" align="center">Your License!</h3>
<div class="columns">
<div class="column is-one-quarter">

</div>
<div class="column">
<p v-bind:href="chooser.selected_license_link" class="selected-license-name">
{{chooser.selected_license}} ({{chooser.selected_license_short}})
</p>
<p>
{{chooser.selected_license_description}}
</p> <br>
<div>
<p>{{chooser.selected_license_short}} attribution means you are free to</p>
<div id="selected-license-permissions-share">
<p><b>Share</b> the material in any medium or format, and</p>
</div>
<div id="selected-license-permissions-adapt">
<p><b>Adapt</b> {{chooser.selected_license_share_allowance}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--
<div class="column" align="center">
<h3 class="title is-3">Your License!</h3> <br><br>
Expand All @@ -273,6 +254,35 @@ <h3 class="title is-3">Your License!</h3> <br><br>
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" class="chooser-license-icon" id="adaptations-icon">
</span>
</div>-->
<div class="column">
<div class="card" class="chooser-selected" style="border-radius: 5px">
<header class="card-header">
<h2 class="title is-2 chooser-selected-card-title">
Your License!
</h2>
</header>
<div class="card-content">
<div class="chooser-selected-title">
<span id="selected-license-generated-icons" style="display: inline">
<img src="assets/cc.svg" id="cc-logo-icon">
<img src="assets/license-icons/cc-by_icon.svg" id="attribution-icon">
<img src="assets/license-icons/cc-nc_icon.svg" id="commercial-icon">
<img v-bind:src="'assets/license-icons/' + chooser.icons.nd_sa_src" id="adaptations-icon">
</span>
<div>
<b>{{chooser.selected_license_short}}</b>
<a v-bind:href="chooser.selected_license_link" class="help">({{chooser.selected_license}})</a>
</div>
</div>
<p>
{{chooser.selected_license_desc}}
</p><br>
<p>{{chooser.selected_license_short_noversion}} attribution means you allow people to</p>
<p id="generated-license-share"><b>Share</b> the material in any medium or format</p>
<p id="generated-license-adapt"><b>Adapt</b> {{chooser.selected_license_adapt}}</p>
</div>
</div>
</div>
</div>
</div>
<hr>
Expand Down Expand Up @@ -541,39 +551,82 @@ <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="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-by_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Attribution Required</b>
<p class="help">(BY)</p>
</div>
</div>
<p>
All CC licenses require that others who use your work in any way must give
you credit the way you request, but not in a way that suggests you endorse
them or their use. If they want to use your work without giving credit for
endorsement purposes, they must get your permission first.
</p>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nd_icon.svg">
NoDerivatives (ND)
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-nd_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Modifying Not Allowed</b>
<p class="help">(ND/ NoDerivatives)</p>
</div>
</div>
<p>
You may not create derivatives of the licensed work.
You let others copy, distribute, display, and perform, and modify your work,
as long as they distribute any modified work, they must get your permission first.
</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>
</div>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<img src="assets/license-icons/cc-sa_icon.svg">
ShareAlike (SA)
<p>
You may create and distribute derivative works, but only under the same or a compatible license.
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-nc_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Commercial Use Not Allowed</b>
<p class="help">(NC/ NonCommercial)</p>
</div>
</div>
<!--
<img src="assets/license-icons/cc-nc_icon.svg">
<div style="display: inline; vertical-align: middle">
<b style="display: inline-block; padding-right: 25%">Commercial Use Not Allowed</b>
<p class="help">help</p>
</div>-->
<p style="margin-bottom: 0%; margin-top: 0px;">
You let others copy, distribute, display, perform, and (unless you have
chosen NoDerivatives) modify and use your work for any purpose other
than commercially, unless they get your permission first.
</p>
<p class="help">
Curious what qualifies as a Commercial Use? Check out the
<a href="https://wiki.creativecommons.org/wiki/NonCommercial_interpretation">
CC wiki page on interpretation of Commercial Uses.
</a>
</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>
</div>
<div class="edu-icons-section">
<img src="assets/license-icons/cc-nc_icon.svg">
NonCommercial (NC)
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-sa_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<b>Distributed on Same Terms</b>
<p class="help">(SA/ ShareAlike)</p>
</div>
</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>
You let others copy, distribute, perform, and modify your work, as long as
they distribute any modified work on the same terms. If they want to
distribute modified works under other terms, they must get your permission first.
</p>
</div>
</div>
</div>
Expand Down
99 changes: 61 additions & 38 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,11 @@ var app_state = new Vue({ // eslint-disable-line
chooser: {
selected_license: "[License Name]",
selected_license_short: "[License Short]",
selected_license_slugified: "",
selected_license_short_noversion: "[License Short No Version]",
selected_license_description: "[Selected Description]",
selected_license_share_allowance: "[Share Allowance]",
selected_license_short_noversion: "[License Short NoVersion]",
selected_license_short_slugified: "[Slugified Short]",
selected_license_desc: "[Description]",
selected_license_share: "[Share]",
selected_license_adapt: "[Adapt]",
selected_license_link: "",
icons: {
nc_shown: false,
Expand All @@ -31,41 +32,63 @@ var app_state = new Vue({ // eslint-disable-line
license_mark: "",
normal_icon: true,
metadata_text: ""
},
license_packs: {
"by": {
"description": "As the most accommodating of \
the licenses offered, the CC BY license \
allows others to distribute, remix, tweak, \
and build upon your work, even commercially \
, as long as they credit you for the \
original creation.",
"Adapt": "it for any purpose, even commercial."
},
"by-sa": {
"description": "",
"Adapt": "remix, transform, and build upon the \
material for any purpose, even commercially."
},
"by-nd": {
"description": "",
"Adapt": false
},
"by-nc": {
"description": "",
"Adapt": "remix, transform, and build upon the material, \
but not for commercial purposes."
},
"by-nc-sa": {
"description": "",
"Adapt": "remix, transform, and build upon the material, \
but not for commercial purposes."
},
"by-nc-nd": {
"description": "",
"Adapt": false
}
}
},
license_packs: {
"by": {
"description": "As the most accommodating of \
licenses offered, the CC BY license allows others \
to distribute, remix, tweak, and build upon your \
work, even commercially, as long as they credit \
you for the original creation.",
"Adapt": "it for any purpose, even commercially"
},
"by-sa": {
"description": "The CC BY-SA license is realtively \
accommodating. Similar to the CC BY license, BY-SA \
allows others to distribute, remix, tweak, and build \
upon your work, even commercially, as long as they \
credit you for the original creation, and share the \
derivative work under the same license.",
"Adapt": "it for any purpose, even commercially \
(must share under the same license)"
},
"by-nd": {
"description": "The CC BY-ND license begins to become \
less accommodating. BY-ND stipulates that people are \
free to distribute your work, even commercially, \
and must credit you with the original creation, but \
they are not allowed to remix, tweak, or build upon \
your work."
},
"by-nc": {
"description": "The CC BY-NC license begins to become \
less accommodating. BY-NC stipulates that others may \
not use your work for commercial purposes. BY-NC allows \
others to distribute, remix, tweak, and build upon your \
work, as long as they credit you with the original creation.",
"Adapt": "it for any purpose, except commercially",
},
"by-nc-sa": {
"description": "The CC BY-NC-SA license is the second \
least accommodating license that CC offers. BY-NC-SA \
stipulates that others are free to distribute, remix, \
tweak, and build upon your work, as long as they share \
the derivative work under the same license, credit you \
with the original creation, and as long as the work \
is not used for commercial purposes.",
"Adapt": "it for any purpose, except commercially \
(must share under the same license)",
},
"by-nc-nd": {
"description": "The CC BY-NC-ND license is the \
least accommodating license that CC offers. BY-NC-ND \
stipulates that others are free to distribute your \
work, but not for commercial purposes, and that \
others may not remix, tweak, or build upon your \
work. BY-NC-ND also stipulates that others must \
credit you for the original creation.",
},
}
}
});
Loading