jlengrand/checkoutCreate
1
0
Fork 0
mirror of https://github.com/jlengrand/checkoutCreate.git synced 2026-03-10 08:11:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

new features

Browse Source 
Text styles added:
- align text position
- make text bold
- make text italic
This commit is contained in:
Farah
2022-10-07 18:13:52 +01:00
parent 7eb5407869
commit cdda77aac6
3 changed files with 101 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
app/static/css/application.css
View File

@@ -406,10 +406,6 @@ a:hover {
/* text align selector styling */
.text-alignment{
}
/* Test card selector*/
.card-selector{
align-items:center;
background:#e5eaef;
border:1px solid #b9c4c9;
@@ -430,8 +426,54 @@ a:hover {
}
.textalign-selector__select{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background:transparent;
border:0;
cursor:pointer;
flex:1;
font-size:1em;
height:100%;
margin:0 -12px 0 -42px;
outline:none;
padding-left:42px;
width:180px
}
.text-alignment:focus{
box-shadow:none
}
.text-alignment:hover{
border-color:#99a3ad
}
.text-alignment .dropdown-icon{
margin-right:12px;
margin-top:3px
}
/* Test card selector*/
.card-selector{
align-items:center;
background:#e5eaef;
border:1px solid #b9c4c9;
border-radius:6px;
display:flex;
height:40px;
margin:auto 0 auto auto;
outline:none;
padding:0 0 0 12px;
position:relative;
width:100%
}
@media (min-width:768px){
.card-selector{
width:200px
}
}
.card-selector__brand{
display:inline-flex;
margin-right:10px;
@@ -452,15 +494,6 @@ a:hover {
width:180px
}
.text-alignment:focus{
box-shadow:none
}
.text-alignment:hover{
border-color:#99a3ad
}
.text-alignment .dropdown-icon{
}
.card-selector:focus{
box-shadow:none
}
@@ -753,6 +786,7 @@ a:hover {
--bg-color: white;
--dropin-color: #f7f8f9;
--text-align: left;
--text-bold: normal;
}
.card-visited .card__back {
@@ -795,6 +829,7 @@ a:hover {
border-radius: var(--body-edges) !important;
border: var(--border-off) !important;
background: var(--dropin-color) !important;
font-weight: var(--text-bold) !important;
}
.adyen-checkout__dropin {
@@ -810,5 +845,18 @@ a:hover {
.checkout .col {
background: var(--bg-color) !important;
}
.adyen-checkout__payment-method__name {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
}
.adyen-checkout__label__text {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
}
.adyen-checkout__checkbox__label {
font-weight: var(--text-bold) !important;
font-style: var(--text-italic) !important;
}

29
app/static/js/adyen-implementation.js
View File

@@ -611,6 +611,35 @@ function positionText() {
r.style.setProperty('--text-align', positionValue);
console.log(positionValue)
}
function makeBold() {
if (document.getElementById("makeBold").classList.contains("bold-active")) {
document.getElementById("makeBold").classList.remove("bold-active")
r.style.setProperty('--text-bold', null)
console.log("i'm checked")
}
else {
document.getElementById("makeBold").classList.add("bold-active")
r.style.setProperty('--text-bold', "bold")
console.log("not checked")
}
}
//makie text italic
function makeItalic() {
if (document.getElementById("makeItalic").classList.contains("italic-active")) {
document.getElementById("makeItalic").classList.remove("italic-active")
r.style.setProperty('--text-italic', null)
console.log("i'm checked")
}
else {
document.getElementById("makeItalic").classList.add("italic-active")
r.style.setProperty('--text-italic', "italic")
console.log("not checked")
}
}
// document.getElementById('showPayMethod').parentNode.addEventListener('click', function (event);
//drop down selector for the different font styles
//document.getElementById("font_select").parentNode.addEventListener('change', function() {

13
app/templates/component.html
View File

@@ -66,7 +66,6 @@
<br>
<div class="font-selector">
<select onchange="changeFont(this)" id="font_select" class="font-selector__select" aria-label="font" autocomplete="off">
<option value="Segoe UI, sans-serif, Helvetica, Arial" style="font-family:'Segoe UI', sans-serif, Helvetica, Arial">Segoe UI</option>
<option value="Roboto Condensed, sans-serif" style="font-family:'Roboto Condensed', sans-serif">Roboto Condensed</option>
<option value="Engagement, cursive" style="font-family:'Engagement', cursive">Engagement</option>
@@ -74,23 +73,27 @@
<option value="Times New Roman, Times, serif" style="font-family:'Times New Roman', Times, serif">Times New Roman</option>
<option value="Arial, Helvetica, sans-serif" style="font-family:'Arial', Helvetica, sans-serif">Arial</option>
<option value="Lucida Console, 'Courier New', monospace" style="font-family:'Lucida Console', 'Courier New', monospace">Lucida</option>
</select>
<div class="dropdown-icon" aria-hidden="true">
<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">
</div>
</div>
<br>
<!--text alignment start -->
<div class="text-alignment">
<select onchange="positionText(this)" id="positionText" class="textalign-selector__select" autocomplete="off">
<option disabled selected>Align Text</option>
<option value="center" type="button" style="text-align: center">center</option>
<option value="left" type="button" style="text-align: left">left</option>
<option value="right" type="button" style="text-align: right">right</option>
<option value="center" style="text-align: center">center</option>
<option value="left" style="text-align: left">left</option>
<option value="right" style="text-align: right">right</option>
</select>
<div class="dropdown-icon" aria-hidden="true">
<img src="{{ url_for('static', filename='img/dropdown.svg') }}" alt="Dropdown caret">
</div>
</div>
<!-- text alignment end -->
<button type="button" id="makeBold" class="btn" onclick="makeBold()">B</button>
<button type="button" id="makeItalic" class="btn" onclick="makeItalic()">I</button>
<!-- <div class="form-check">
<input type="checkbox" class="form-check-input" id="firstPayBox">
<label class="form-check-label" for="firstPayBox">Open First Payment</label>