Skip to content

Complete FU worked on develop #5

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

Open
tom-clik wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Complete FU worked on develop #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
cb7b667
Merge tag 'release-test' into develop
tom-clik Aug 6, 2021
d1b7735
Some fixes for columns
tom-clik Mar 8, 2022
185e768
Fonts WIP
tom-clik Mar 8, 2022
ef140f6
SOme more menu stuff
tom-clik Mar 9, 2022
1b0886e
Merge branch 'master' into develop
tom-clik Aug 5, 2022
e072971
Missing js library
tom-clik Oct 20, 2022
d549a87
Typos in notes
tom-clik Oct 20, 2022
1fd54ce
WIP layouts
tom-clik Oct 20, 2022
639e263
Fix for alignment
tom-clik Oct 20, 2022
8c181f4
Tidy up of js libraries
tom-clik Oct 20, 2022
d493fa6
Improved menu functions
tom-clik Oct 20, 2022
cf48f9e
Confusion over panel schemes
tom-clik Dec 1, 2022
477c50a
Updates for integration with Coldlight
tom-clik Dec 14, 2022
961ff5d
Updates for Clikpage
tom-clik Dec 20, 2022
3a801ab
WIP css for galleries
tom-clik Jan 3, 2023
c0d0a27
Changed the grids to use css vars for most of the styling.
tom-clik Apr 15, 2023
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
95 changes: 56 additions & 39 deletions _assets/_testing/buttons.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,10 @@
--font-size:0.86em;
--text-font: 'courier new';
}
#test1 {
--icon-width:64px;
--icon-height:64px;
}
</style>
<style id="test2" data-title="other styling">
.panels > div {
Expand All @@ -41,58 +45,71 @@
}
/* Button defaults */
.button {
--link-color:red;
--button-font:var(--text-font);
color:red;
font-family:var(--text-font);
}

.button label {
padding:4px;
}

.button:hover {
--link-color:magenta;
color:magenta;
}


/* Scheme no font */
/* note that --icon-font is set when we include a fonts css, cf. */
.scheme-no-font .button {
--icon-font:var(--text-font);
--link-color:teal;
color:teal;
--icon-width:16px;
--icon-height:16px;
--button-padding:2px;
padding:2px;

}
.scheme-no-font {
--icon-font:verdana;
}

.button-font {
font: ;
.scheme-no-font .icon {
font-family: verdana;
}

/* Scheme panel */
.scheme-panel .button {
--button-background-color: #c5c5c5;
--button-border-width: 1px;
--color:#ffff00;
--button-border-color:hotpink;
}
background-color: #c5c5c5;
border-width: 1px solid hotpink;
color:red;
fill:red;
stroke:red;
padding:4px 18px;

}
.scheme-panel .button:hover {
--color: #ff00ff;
--button-background-color: #ffff00;
color: #ff00ff;
fill:#ff00ff;
stroke:#ff00ff;
background-color: #ffff00;
}
/* Scheme rollout */
.scheme-rollout .button {
--link-color:teal;
color:teal;
--icon-width:16px;
--icon-height:16px;
--button-padding:2px;
padding:2px;
}
.scheme-rollout .button:hover {
--link-color:white;
--button-background-color:teal;
color:white;
background-color:teal;
}

.setting-align-left {
--button-align:flex-start;
--button-direction: row;
}
.setting-align-right {
--button-align:flex-start;
--button-direction: row-reverse;
}
.setting-align-center {
--button-align: center;
}



/* container styling */
/* icons are always a list of inline blocks.
Use a wrapper and a flexbox to align them */
Expand Down Expand Up @@ -124,8 +141,8 @@

<div>
<div class="cs-title"><a href="#test1">SVGs with labels</a></div>
<div class="test" id="test1">
<div class="cs-button button scheme-panel">
<div class="test scheme-panel" id="test1">
<div class="button">
<a href="#">
<svg class="icon" viewBox="0 0 24 24"><use xlink:href="../images/combined.svg#cart" /></svg>
<labeL>
Expand All @@ -134,7 +151,7 @@
</a>
</div>

<div class="cs-button button right">
<div class="button right">
<a href="#">
<svg class="icon" viewBox="0 0 24 24"><use xlink:href="../images/combined.svg#cart" /></svg>
<labeL>
Expand Down Expand Up @@ -193,7 +210,7 @@
<div class="">
<div class="cs-title"><a href="#test4">Rollout labels</a></div>
<div class="test scheme-rollout flex-column" id="test4">
<div class="button setting-popout"><a href="#"><i class="icon icon-close"></i><label>icon-close spaces !^&!% fref</label></a></div>
<div class="button setting-popout"><a href="#"><i class="icon icon-close"></i><label>icon-close spaces !^&!% fref</label></a></div>
<div class="button setting-popout"><a href="#"><i class="icon icon-menu"></i><label>icon-menu spaces !^&!% fref</label></a></div>
<div class="button setting-popout"><a href="#"><i class="icon icon-previous"></i><label>icon-previous spaces !^&!% fref</label></a></div>
<div class="button setting-popout"><a href="#"><i class="icon icon-next"></i><label>icon-next spaces !^&!% fref</label></a></div>
Expand Down Expand Up @@ -272,15 +289,15 @@
<div class="cs-title"><a href="#test9">Icons, labels with grid</a></div>
<div class="test button-menu scheme-panel scheme-grid" id="test9">
<!-- setting-align takes the class left or right and justfies the content accordingly -->
<div class="button setting-align left"><a href="#"><i class="icon icon-home"></i><label>Home</label></a></div>
<div class="button setting-align left"><a href="#"><i class="icon icon-search"></i><label>Search</label></a></div>
<div class="button setting-align left"><a href="#"><i class="icon icon-account"></i><label>Account</label></a></div>
<div class="button setting-align left"><a href="#"><i class="icon icon-home"></i><label>Home</label></a></div>
<div class="button setting-align right"><a href="#"><i class="icon icon-search"></i><label>Search</label></a></div>
<div class="button setting-align right"><a href="#"><i class="icon icon-account"></i><label>Account</label></a></div>
<div class="button setting-align right"><a href="#"><i class="icon icon-home"></i><label>Home</label></a></div>
<div class="button setting-align right"><a href="#"><i class="icon icon-search"></i><label>Search</label></a></div>
<div class="button setting-align right"><a href="#"><i class="icon icon-account"></i><label>Account</label></a></div>
<div class="button setting-align-left"><a href="#"><i class="icon icon-home"></i><label>Home</label></a></div>
<div class="button setting-align-left"><a href="#"><i class="icon icon-search"></i><label>Search</label></a></div>
<div class="button setting-align-left"><a href="#"><i class="icon icon-account"></i><label>Account</label></a></div>
<div class="button setting-align-center"><a href="#"><i class="icon icon-home"></i><label>Home</label></a></div>
<div class="button setting-align-center"><a href="#"><i class="icon icon-search"></i><label>Search</label></a></div>
<div class="button setting-align-center"><a href="#"><i class="icon icon-account"></i><label>Account</label></a></div>
<div class="button setting-align-right"><a href="#"><i class="icon icon-home"></i><label>Home</label></a></div>
<div class="button setting-align-right"><a href="#"><i class="icon icon-search"></i><label>Search</label></a></div>
<div class="button setting-align-right"><a href="#"><i class="icon icon-account"></i><label>Account</label></a></div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion _assets/_testing/definitions.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<!DOCTYPE html>
<html>
<head>
<title>Table tests</title>
<title>Definition tests</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/fonts/fonts_local.css">
<link rel="stylesheet" href="../css/definitions.css">
Expand Down
66 changes: 57 additions & 9 deletions _assets/_testing/forms.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,49 @@
<!--

# Notes

Still a bit of a mess

The help icons use absolute positioning which is fine except that they don't work. Probably need to wrap the labels in a span or something

Currently still uses lots of things like `field-background-color` and `button-border-color`. Possibly revert to using actual panels.

-->


<!DOCTYPE html>
<html>
<head>
<title>Table tests</title>
<title>Form tests</title>
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/select2.min.css">
<link rel="stylesheet" href="../css/fonts/fonts_local.css">
<link rel="stylesheet" href="../css/grids.css">
<link rel="stylesheet" href="../css/icons.css">
<link rel="stylesheet" href="../css/forms.css">
<link rel="stylesheet" href="../css/navbuttons.css">
<meta charset="UTF-8">
<style>
.form .error {

#testform {
max-width: 800px;
margin:80px auto;
border:1px solid var(--border-color);
background-color: #efefef;
--field-background-color: white;
--field-border-color: #aaa;
--input-padding: 8px;
}
.button {
--button-border-color:var(--border-color);
--button-border-width:1px;
--button-border-style:solid;
--button-background-color: white;
}


#testform .fieldrow:nth-child(even) {
background-color: #e3e3e3;
}
</style>
</head>

Expand All @@ -26,12 +55,23 @@
<div class="fieldrow">
<label>

Email address
Auto grow text

<div class="button"><a class="icon icon-help"></a></div>
</label>
<field>
<textarea name="field1" rows="1" class="elastic markitup"></textarea>
</field>
</div>
<div class="fieldrow">
<label>

Email

<div class="button"><a class="icon icon-help"></a></div>
</label>
<field>
<textarea name="field1" class="autogrow markitup"></textarea>
<input type="text" name="email"></textarea>
</field>
</div>
<div class="fieldrow">
Expand Down Expand Up @@ -128,16 +168,24 @@

</label>
<field>
<input type="button" value="Submit" onclick="getOk(this);">
<input type="button" value="Get validation errors" onclick="getErrors(this);">
<input type="button" value="Network errors" onclick="failError(this);">
<div class="button">
<input type="button" value="Submit" onclick="getOk(this);">
</div>
<div class="button">
<input type="button" value="Get validation errors" onclick="getErrors(this);">
</div>
<div class="button">
<input type="button" value="Network errors" onclick="failError(this);">
</div>
</field>
</div>
</form>

</div>

<script src="../js/jquery-3.4.1.js"></script>
<script src="../js/select2.min.js"></script>
<script src="../js/jquery.elastic.1.6.11.js"></script>
<script src="../js/jquery.validate.js"></script>
<script src="../js/jquery.form.js"></script>
<script src="../js/jquery.clikForm.js"></script>
Expand Down Expand Up @@ -175,7 +223,7 @@
$("#testform").clikForm({
debug:false,
rules : {
field1: {
email: {
required: true,
email: true
},
Expand Down
Loading