8000 Add/ Refine Mobile CSS by akmadian · Pull Request #20 · creativecommons/chooser · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Add/ Refine Mobile CSS #20

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 5 commits into from
Jul 17, 2019
Merged

Add/ Refine Mobile CSS #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d4502ed
Merge pull request #19 from creativecommons/master
Jul 7, 2019
d1d1d48
Fix some font sizes, margins, and padding
Jul 7, 2019
067e48f
Fix icon explanations margins and padding on desktop
Jul 7, 2019
cf113e6
Experiment with modal margins
Jul 8, 2019
9e1e5d9
Fix modal title font size on mobile
Jul 17, 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
106 changes: 32 additions & 74 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,58 +41,14 @@ <h1 class="site-title">CC License Chooser</h1>
Confused? Check out the "<b>Need Help?</b>" section just below!
</p>
<div class="columns">
<!--
<div class="column" id="chooser-controls-radio">
<p align="center">Changes to the options below will affect the license choice to the right.</p> <br>
<div id="license-chooser-allow-adaptations">
<span>
<h4 class="title is-4">
Do you want to allow adaptations of your work?
<a class="modal-icon" src="assets/info-icon.svg" class="modal-icon"></a>
</h4>
</span>
<div class="control" style="margin-left: 9%">
<label class="radio">
<input type="radio" name="allow-adaptations-radio">
Yes
</label> <br>
<label class="radio">
<input type="radio" name="allow-adaptations-radio">
No
</label> <br>
<label class="radio">
<input type="radio" name="allow-adaptations-radio">
Yes, as long as others share alike
</label> <br>
</div>
</div> <br>
<div class="license-chooser-allow-commercial">
<span>
<h4 class="title is-4">
Do you want to allow commercial uses of your work?
<a class="modal-icon" src="assets/info-icon.svg" class="modal-icon"></a>
</h4>
</span>
<div class="control" style="margin-left: 9%">
<label class="radio">
<input type="radio" name="allow-commercial-radio">
Yes
</label> <br>
<label class="radio">
<input type="radio" name="allow-commercial-radio">
No
</label> <br>
</div>
</div>
</div>-->
<div class="column" id="chooser-controls-switch">
<p style="display: none" align="center">Changes to the options below will affect the license choice to the right.</p> <br>
<div id="license-chooser-allow-adaptations">

<div id="license-chooser-allow-adaptations" class="chooser-question">
<span>
<h4 class="title is-4">
<p class="chooser-question-title">
Do you want to allow adaptations of your work?
<a class="modal-icon" src="assets/info-icon.svg" class="modal-icon"></a>
</h4>
</p>
<div id="modal-allow-adaptations" class="modal">
<div class="modal-background" >
<div class="modal-card">
Expand Down Expand Up @@ -148,12 +104,12 @@ <h4 class="title is-4">
</div>
</div>
</div> <br><br>
<div class="license-chooser-allow-commercial">
<div id="license-chooser-allow-commercial">
<span>
<h4 class="title is-4">
<p class="chooser-question-title">
Do you want to allow commercial uses of your work?
<a class="modal-icon" src="assets/info-icon.svg" class="modal-icon"></a>
</h4>
</p>
<div id="modal-allow-commercial" class="modal">
<div class="modal-background" >
<div class="modal-card">
Expand Down Expand Up @@ -304,7 +260,7 @@ <h1 class="title site-title">Confused? Need Help?</h1>
<div class="modal-background" >
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">What Are Creative Commons Licenses?</p>
<p class="modal-card-title modal-title">What Are Creative Commons Licenses?</p>
<button class="delete" aria-label="close" >
</header>
<section class="modal-card-body">
Expand Down Expand Up @@ -335,7 +291,7 @@ <h1 class="title site-title">Confused? Need Help?</h1>
<div class="modal-background" >
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">How do the Licenses Work?</p>
<p class="modal-card-title modal-title">How do the Licenses Work?</p>
<button class="delete" aria-label="close" >
</header>
<section class="modal-card-body">
Expand Down Expand Up @@ -393,7 +349,7 @@ <h1 class="title site-title">Confused? Need Help?</h1>
<div class="modal-background" >
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Want Public Domain Instead?</p>
<p class="modal-card-title modal-title">Want Public Domain Instead?</p>
8000 <button class="delete" aria-label="close" >
</header>
<section class="modal-card-body">
Expand Down Expand Up @@ -423,7 +379,7 @@ <h1 class="title site-title">Confused? Need Help?</h1>
<div class="modal-background" >
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">Considerations Before Licensing</p>
<p class="modal-card-title modal-title">Considerations Before Licensing</p>
<button class="delete" aria-label="close" >
</header>
<section class="modal-card-body">
Expand Down Expand Up @@ -459,7 +415,7 @@ <h1 class="title site-title">Confused? Need Help?</h1>
<div class="modal-background" >
<div class="modal-card">
<header class="modal-card-head">
<p class="modal-card-title">How do I Formally License my Work?</p>
<p class="modal-card-title modal-title">How do I Formally License my Work?</p>
<button class="delete" aria-label="close" >
</header>
<section class="modal-card-body">
Expand Down Expand Up @@ -509,9 +465,9 @@ <h1 class="title site-title">Confused? Need Help?</h1>
</a>
<div id="modal-q6" class="modal">
<div class="modal-background" >
<div class="modal-card">
<div class="modal-card modal-add-margin" style="margin-left: 5%">
<header class="modal-card-head">
<p class="modal-card-title">The Six Creative Commons Licenses</p>
<p class="modal-card-title modal-title">The Six Creative Commons Licenses</p>
<button class="delete" aria-label="close" >
</header>
<section class="modal-card-body">
Expand Down Expand Up @@ -578,11 +534,11 @@ <h1 class="title site-title">Confused? Need Help?</h1>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<div class="columns is-gapless">
<div class="column is-1">
<img src="assets/license-icons/cc-by_icon.svg">
<div class="columns is-gapless is-inline-flex" id="heading">
<div class="column is-one-quarter-desktop is-narrow-mobile">
<img src="assets/license-icons/cc-by_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<div class="column edu-icons-section-icon_title is-full">
<b>Attribution Required</b>
<p class="help">(BY)</p>
</div>
Expand All @@ -595,11 +551,11 @@ <h1 class="title site-title">Confused? Need Help?</h1>
</p>
</div>
<div class="edu-icons-section">
<div class="columns is-gapless">
<div class="column is-1">
<div class="columns is-gapless is-inline-flex" id="heading">
<div class="column is-one-quarter-desktop is-narrow-mobile">
<img src="assets/license-icons/cc-nd_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<div class="column edu-icons-section-icon_title is-full">
<b>Modifying Not Allowed</b>
<p class="help">(ND/ NoDerivatives)</p>
</div>
Expand All @@ -612,11 +568,11 @@ <h1 class="title site-title">Confused? Need Help?</h1>
</div>
<div class="column is-one-third">
<div class="edu-icons-section">
<div class="columns is-gapless">
<div class="column is-1">
<div class="columns is-gapless is-inline-flex" id="heading">
<div class="column is-one-quarter-desktop is-narrow-mobile">
<img src="assets/license-icons/cc-nc_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<div class="column edu-icons-section-icon_title is-full">
<b>Commercial Use Not Allowed</b>
<p class="help">(NC/ NonCommercial)</p>
</div>
Expand All @@ -640,11 +596,11 @@ <h1 class="title site-title">Confused? Need Help?</h1>
</p>
</div>
<div class="edu-icons-section">
<div class="columns is-gapless">
<div class="column is-1">
<div class="columns is-gapless is-inline-flex" id="heading">
<div class="column is-one-quarter-desktop is-narrow-mobile">
<img src="assets/license-icons/cc-sa_icon.svg">
</div>
<div class="column edu-icons-section-icon_title">
<div class="column edu-icons-section-icon_title is-full">
<b>Distributed on Same Terms</b>
<p class="help">(SA/ ShareAlike)</p>
</div>
Expand All @@ -661,7 +617,7 @@ <h1 class="title site-title">Confused? Need Help?</h1>
<hr>
<button class="collapsible" id="html-generator-dropdown">
<p>
Have a Web Page? Embed your License Info!
Have a Web Page? Click Here to Embed your License Info!
</p>
</button>
<!--
Expand Down Expand Up @@ -775,12 +731,14 @@ <h1 class="title is-1">This is the dropdown click area</h1>
</div>-->
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="../node_modules/@creativebulma/bulma-collapsible/dist/js/bulma-collapsible.min.js"></script>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript" src="scripts/page-controls.js"></script>
<script type="text/javascript" src="scripts/HTML-generator.js"></script>
<script type="text/javascript" src="scripts/choose-a-license.js"></script>
<script type="text/javascript" src="scripts/scripts.js"></script>
</body>
</html>
<!-- </> by Ari Madian :)-->
<!--
</> by Ari Madian :)
https://github.com/akmadian
-->
59 changes: 55 additions & 4 deletions src/styles/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,8 @@ h3 {

.selected-license-card-title {
padding-top: 2%;
}

.onmobile-hide {
display: block;
}
Expand Down Expand Up @@ -180,10 +182,14 @@ input[type="checkbox"] {
margin-top: 2%
}

.chooser-question {
font-size: 1.5rem;
}

@media only screen and (max-width: 600px) {
.site-container {
margin-left: 1.4%;
margin-right: 1.4%
margin-left: 1.4% !important;
margin-right: 1.4% !important;
}

.site-title {
Expand All @@ -200,8 +206,31 @@ input[type="checkbox"] {

.edu-icons-section-heading {
margin: auto;
width: 60%;
margin-bottom: 1%;
width: 100%;
margin-bottom: 0%;
}

.edu-icons-section {
margin-bottom: 3%;
}

.edu-icons-section #heading {
width: 100%;
margin-bottom: 1.8%;
}

.chooser-question {
margin-bottom: 12%;
}

.chooser-question-title {
font-size: 16px;
font-weight: bold;
margin-bottom: 2%;
}

.chooser-question-title img {
width: 30px;
}

.button-text {
Expand Down Expand Up @@ -229,4 +258,26 @@ input[type="checkbox"] {
font-size: 16px;
font-weight: 500;
}

.modal-add-margin {
margin-left: 5% !important;
margin-right: 5% !important;
}

p.modal-title {
font-size: 16px;
}
}


@media only screen and (max-width: 800px) {
.site-container {
margin-left: 1.4% !important;
margin-right: 1.4% !important;
}

.edu-icons-section #heading {
width: 100%;
margin-bottom: 1.8%;
}
}
0