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 1 commit
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
Prev Previous commit
Next Next commit
Add new chosen license designs
  • Loading branch information
Ari committed Jul 2, 2019
commit b9e1e6e4216d7462a77c9ae7e1296fceeba8426c
52 changes: 34 additions & 18 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -254,24 +254,40 @@ <h2 class="title is-2 chooser-selected-card-title">
</h2>
</header>
<div class="card-content">
<div class="columns">
<span class="column is-one-third generated-icons selected-generated-icons" id="selected-license-generated-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">
<div class="chooser-selected-title">
<!--
<div class="columns is-gapless">
<div class="column is-one-quarter">
<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>
<div class="column">
<b>{{chooser.selected_license}}</b>
<p class="help">({{chooser.selected_license_short}})</p>
</div>
</div>-->
<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 class="column">
<b class="chooser-selected-title">{{chooser.selected_license}} ({{chooser.selected_license_short}})</b>
<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, and</p>
<p id="generated-license-adapt"><b>Adapt</b> {{chooser.selected_license_adapt}}</p>
<div>
<b>{{chooser.selected_license}}</b>
<p class="help">({{chooser.selected_license_short}})</p>
</div>
</div>
<p>
{{chooser.selected_license_desc}}
</p>

<p>{{chooser.selected_license_short_noversion}} attribution means you allow people to</p> <br>
<p id="generated-license-share"><b>Share</b> the material in any medium or format, and</p>
<p id="generated-license-adapt"><b>Adapt</b> {{chooser.selected_license_adapt}}</p>
</div>
</div>
</div>
Expand Down Expand Up @@ -567,9 +583,9 @@ <h1 class="title is-1">Confused? Need Help?</h1>
<div class="column is-1">
<img src="assets/license-icons/cc-nc_icon.svg">
</div>
<div class="column">
<p>(NC/NonCommercial)</p>
<p>Commercial use Not Allowed</p>
<div class="column" style="vertical-align: middle">
(NC/NonCommercial) <br>
Commercial use Not Allowed
</div>
</div>
<p style="margin-bottom: 0%">
Expand Down
6 changes: 3 additions & 3 deletions src/scripts/choose-a-license.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
function set_license() {
set_license_text(
set_license_text()
set_license_icons()
set_license_info
set_license_info()
}

function set_license_text() {
Expand All @@ -28,7 +28,7 @@ function set_license_info() {
if (!pack["Adapt"]) { // If adaptations are not allowed
document.getElementById("generated-license-adapt").style.display = "none"
} else {
document.getElementById("generated-license-adapt").style.display = "block
document.getElementById("generated-license-adapt").style.display = "block"
}
}

Expand Down
30 changes: 20 additions & 10 deletions src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,6 @@
margin: 1.5% auto;
}

.chooser-selected-title {
font-size: 1.5vw;
}

.unselected {
width: 45px;
opacity: 0.4;
Expand Down Expand Up @@ -91,15 +87,29 @@ h3 {
filter: alpha(opacity=100); /* msie */
}

.selected-generated-icons {
width: 50%;
margin: 2% auto;
background-color: aqua;
.chooser-selected-title {
margin-bottom: 3%;
}

.chooser-selected-title b {
font-size: 1.5vw;
vertical-align: middle;
}

.chooser-selected-title img {
vertical-align: middle;
width: 42px;
opacity: 0.7;
filter: alpha(opacity=70); /* msie */
}

.selected-generated-icons img {
width: 60px
.chooser-selected-title:hover img {
vertical-align: middle;
width: 42px;
opacity: 1;
filter: alpha(opacity=100); /* msie */
}

/*
input[type="checkbox"] {
background: #ef9421;
Expand Down