Initial project structure with sails.js

This commit is contained in:
2023-11-21 21:57:32 -05:00
commit 523978e520
197 changed files with 76740 additions and 0 deletions

37
assets/styles/bootstrap-overrides.less vendored Normal file
View File

@@ -0,0 +1,37 @@
/**
* This file is for overriding some default bootstrap styles.
*
* > NOTE THAT THIS FILE AFFECTS GLOBAL STYLES.
*/
// lesshint-disable
* {
box-sizing: border-box;
}
// lesshint-enable
img {
display: block;
}
// Get rid of weird background on <a>s with button styles
.btn, [type='button'] {
-webkit-appearance: none;
}
// Custom link styles within bodies of text
h1, h2, h3, h4, h5, h6, p, li, blockquote, label {
>a:not(.btn), small >a:not(.btn) {
color: @brand;
border-bottom: 1px solid @text-normal;
&:hover {
text-decoration: none;
color: @text-normal;
}
}
}
blockquote {
border-left: 3px solid @border-lt-gray;
padding-left: 20px;
}

View File

@@ -0,0 +1,41 @@
/**
* <ajax-button>
*
* App-wide styles for our ajax buttons.
*/
[parasails-component='ajax-button'] {
.button-loader, .button-loading {
display: none;
margin: auto;
.loading-dot {
opacity: 0;
display: inline;
.fade-in();
.animation-duration(1s);
.animation-iteration-count(infinite);
.animation-direction(linear);
&.dot1 {
.animation-delay(0.25s);
}
&.dot2 {
.animation-delay(0.5s);
}
&.dot3 {
.animation-delay(0.75s);
}
&.dot4 {
.animation-delay(1s);
}
}
}
&.syncing {
.button-loader, .button-loading {
display: inline-block;
}
.button-text {
display: none;
}
}
}

View File

@@ -0,0 +1,9 @@
/**
* <cloud-error>
*
* App-wide styles for our cloud-errors.
*/
[parasails-component='cloud-error'] {
// ...
}

View File

@@ -0,0 +1,92 @@
/**
* <modal>
*
* App-wide styles for our modals.
*/
[parasails-component='modal'] {
-webkit-overflow-scrolling: touch;//« makes this actually scrollable on certain phones
[purpose='modal-dialog'] {
z-index: 100;
position: relative;
max-width: 700px;
[purpose='modal-content'] {
max-width: 700px;
[purpose='modal-close-button'] {
.btn-reset();
opacity: 0.6;
&:hover {
opacity: 1;
}
}
}
}
// Custom styles for the Bootstrap modal:
// (Want to use Bootstrap's default styles? Just comment out the rest of the rules below)
.petticoat {
position: fixed;
width: 100%;
height: 75px;// should cover topbar
z-index: 50;
left: 0px;
top: 0px;
background-color: @accent-white;
}
.modal-content {
border-radius: 0px;
border-color: @accent-white;
padding-top: 50px;
padding-bottom: 50px;
padding-left: 25px;
padding-right: 25px;
.modal-header {
border-bottom: none;
display: block;
position: relative;
text-align: center;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
.modal-title {
font-weight: @bold;
}
.modal-intro {
margin-left: auto;
margin-right: auto;
color: @text-muted;
margin-bottom: 20px;
}
hr {
margin-top: 25px;
margin-left: auto;
margin-right: auto;
margin-bottom: 10px;
width: 100px;
height: 2px;
border-top: 2px solid @brand;
}
}
.modal-body {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0px;
padding-right: 0px;
}
.modal-footer {
padding-top: 25px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
margin-top: 10px;
}
}
}
// Modal backdrop styles are exposed globally here because this gets appended to the <body>
.modal-backdrop {
background-color: @accent-white;
&.show {
opacity: 0.95;
}
}

View File

@@ -0,0 +1,65 @@
/**
* <stripe-card-element>
*/
[parasails-component='stripe-card-element'] {
.card-element-wrapper {
position: relative;
.card-element {
padding-top: 0;
padding-bottom: 0;
padding-right: 30px;
&.pseudofocused {
// These should mimic your normal form inputs' :focus styles:
border-color: #80bdff;
outline: 0;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
}
.status-indicator {
font-size: 15px;
position: absolute;
right: 14px;
top: 8px;
&.hidden {
display: none;
}
&.syncing {
-webkit-animation: fa-spinner-rotate 1.5s infinite linear;
animation: fa-spinner-rotate 1.5s infinite linear;
@-webkit-keyframes fa-spinner-rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate-clockwise {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
}
&.secret-card-element-wrapper {
opacity: 0;
height: 1px;
}
}
@media screen and (max-width: 450px) {
.card-element-wrapper {
.card-element {
padding-right: 20px;
}
.status-indicator {
right: 9px;
}
}
}
}

View File

@@ -0,0 +1,42 @@
/**
* importer.less
*
* By default, new Sails projects are configured to compile this file
* from LESS to CSS. Unlike CSS files, LESS files are not compiled and
* included automatically unless they are imported below.
*
* For more information see:
* https://sailsjs.com/anatomy/assets/styles/importer-less
*/
// Mixins and variables (LESS mixins/variables only, no global selectors)
@import 'mixins-and-variables/index.less';
// Overall layout (contains global selectors)
@import 'bootstrap-overrides.less';
@import 'layout.less';
// Per-component styles
@import 'components/stripe-card-element.component.less';
@import 'components/ajax-button.component.less';
@import 'components/modal.component.less';
@import 'components/cloud-error.component.less';
// Per-page styles
@import 'pages/homepage.less';
@import 'pages/dashboard/welcome.less';
@import 'pages/entrance/signup.less';
@import 'pages/entrance/confirmed-email.less';
@import 'pages/entrance/login.less';
@import 'pages/entrance/forgot-password.less';
@import 'pages/entrance/new-password.less';
@import 'pages/account/account-overview.less';
@import 'pages/account/edit-password.less';
@import 'pages/account/edit-profile.less';
@import 'pages/legal/terms.less';
@import 'pages/legal/privacy.less';
@import 'pages/faq.less';
@import 'pages/contact.less';
@import 'pages/404.less';
@import 'pages/500.less';
@import 'pages/498.less';

59
assets/styles/layout.less Normal file
View File

@@ -0,0 +1,59 @@
@footer-height: 40px;
@container-md-max-width: 1100px;
[v-cloak] { display: none; }
html, body {
height: 100%;
margin: 0;
}
[purpose='page-wrap'] {
height: 100%;
/* lesshint-disable */height: auto !important;/* lesshint-enable */
// ^^The above is to disable "importantRule" and "duplicateProperty" rules.
min-height: 100%;
position: relative;
padding-bottom: @footer-height;
}
[purpose='page-footer'] {
border-top: 1px solid rgba(0, 0, 0, 0.1);
height: @footer-height;
width: 100%;
position: absolute;
left: 0px;
bottom: 0px;
}
body.detected-mobile {
// Above and beyond the media queries below, this selector (which relies on
// `parasails` automatically attaching this class, if appropriate) contains
// styles intended to be activated specifically when loaded from a recognized
// mobile device, regardless of viewport dimensions. This includes tablet
// devices (like the iPad) as well as handset devices (like the iPhone).
// …
}
@media (max-width: 800px) {
[purpose='page-wrap'] {
padding-bottom: 75px;
[purpose='page-footer'] {
height: 75px;
[purpose='footer-copy'], [purpose='footer-nav'] {
width: 100%;
display: block;
text-align: center;
}
}
}
}
@media (max-width: 575px) {
[purpose='page-wrap'] {
padding-bottom: 100px;
[purpose='page-footer'] {
height: 100px;
}
}
}

View File

@@ -0,0 +1,270 @@
.animation-delay(@delay) {
-moz-animation-delay: @delay;
-webkit-animation-delay: @delay;
-ms-animation-delay: @delay;
-o-animation-delay: @delay;
animation-delay: @delay;
}
.animation-name(@name) {
-moz-animation-name: @name;
-webkit-animation-name: @name;
-ms-animation-name: @name;
-o-animation-name: @name;
animation-name: @name;
}
.animation-duration(@duration) {
-moz-animation-duration: @duration;
-webkit-animation-duration: @duration;
-ms-animation-duration: @duration;
-o-animation-duration: @duration;
animation-duration: @duration;
}
.animation-iteration-count(@iteration-count) {
-moz-animation-iteration-count: @iteration-count;
-webkit-animation-iteration-count: @iteration-count;
-ms-animation-iteration-count: @iteration-count;
-o-animation-iteration-count: @iteration-count;
animation-iteration-count: @iteration-count;
}
.animation-direction(@direction) {
-moz-animation-direction: @direction;
-webkit-animation-direction: @direction;
-ms-animation-direction: @direction;
-o-animation-direction: @direction;
animation-direction: @direction;
}
.animation-timing-function(@timingFunction) {
-moz-animation-timing-function: @timingFunction;
-webkit-animation-timing-function: @timingFunction;
-ms-animation-timing-function: @timingFunction;
-o-animation-timing-function: @timingFunction;
animation-timing-function: @timingFunction;
}
.transition (@transition) {
-webkit-transition: @transition;
-moz-transition : @transition;
-ms-transition : @transition;
-o-transition : @transition;
}
.translate (@x, @y:0) {
-webkit-transform: translate(@x, @y);
-moz-transform : translate(@x, @y);
-ms-transform : translate(@x, @y);
-o-transform : translate(@x, @y);
transform : translate(@x, @y);
}
//Animations
.fade-in() {
.animation-name(fade-in);
@-webkit-keyframes fade-in {
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
}
@-moz-keyframes fade-in {
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
}
@-o-keyframes fade-in {
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
}
@keyframes fade-in {
0% {opacity: 0;}// lesshint spaceBeforeBrace: false
100% {opacity: 1;}// lesshint spaceBeforeBrace: false
}
}
.loader(@dot-color: @accent-white) {
display: inline-block;
margin: auto;
.loading-dot {
border-radius: 50%;
background-color: @dot-color;
float: left;
opacity: 0;
width: 16px;
height: 16px;
margin: 5px;
.fade-in();
.animation-duration(1s);
.animation-iteration-count(infinite);
.animation-direction(linear);
&.dot1 {
.animation-delay(0.25s);
}
&.dot2 {
.animation-delay(0.5s);
}
&.dot3 {
.animation-delay(0.75s);
}
&.dot4 {
.animation-delay(1s);
}
}
}
// Special rotation animation for a font awesome-based spinner:
.fa-spinner-rotation() {
-webkit-animation: fa-spinner-rotate 1.5s infinite linear;
animation: fa-spinner-rotate 1.5s infinite linear;
@-webkit-keyframes fa-spinner-rotate {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes rotate-clockwise {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
}
.skid() {
.animation-name(skid);
.animation-duration(2.5s);
.animation-iteration-count(infinite);
.animation-timing-function(linear);
@-webkit-keyframes skid {
0% {-webkit-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
10% {-webkit-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
20% {-webkit-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
30% {-webkit-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
40% {-webkit-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
50% {-webkit-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
60% {-webkit-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
70% {-webkit-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
80% {-webkit-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
90% {-webkit-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
100% {-webkit-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
}
@-moz-keyframes skid {
0% {-moz-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
10% {-moz-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
20% {-moz-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
30% {-moz-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
40% {-moz-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
50% {-moz-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
60% {-moz-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
70% {-moz-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
80% {-moz-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
90% {-moz-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
100% {-moz-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
}
@-o-keyframes skid {
0% {-o-transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
10% {-o-transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
20% {-o-transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
30% {-o-transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
40% {-o-transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
50% {-o-transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
60% {-o-transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
70% {-o-transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
80% {-o-transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
90% {-o-transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
100% {-o-transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
}
@keyframes skid {
0% {transform: translate(0px, 0px);}// lesshint spaceBeforeBrace: false
10% {transform: translate(-1px, -1px);}// lesshint spaceBeforeBrace: false
20% {transform: translate(-2px, -2px);}// lesshint spaceBeforeBrace: false
30% {transform: translate(-3px, -2px);}// lesshint spaceBeforeBrace: false
40% {transform: translate(-4px, -1px);}// lesshint spaceBeforeBrace: false
50% {transform: translate(-5px, 0px);}// lesshint spaceBeforeBrace: false
60% {transform: translate(-4px, 1px);}// lesshint spaceBeforeBrace: false
70% {transform: translate(-3px, 2px);}// lesshint spaceBeforeBrace: false
80% {transform: translate(-2px, 2px);}// lesshint spaceBeforeBrace: false
90% {transform: translate(-1px, 1px);}// lesshint spaceBeforeBrace: false
100% {transform: translate(0, 0px);}// lesshint spaceBeforeBrace: false
}
}
.fly-fade() {
.animation-name(flyfade);
.animation-duration(7s);
.animation-iteration-count(infinite);
.animation-timing-function(linear);
@-webkit-keyframes flyfade {
0% {-webkit-transform: translate(0px, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
50% {-webkit-transform: translate(110px, 0px);}// lesshint spaceBeforeBrace: false
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
100% {-webkit-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
}
@-moz-keyframes flyfade {
0% {-moz-transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
50% {-moz-transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
100% {-moz-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
}
@-o-keyframes flyfade {
0% {-o-transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
50% {-o-transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
100% {-o-transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
}
@keyframes flyfade {
0% {transform: translate(0, 0px); opacity: 0;}// lesshint spaceBeforeBrace: false
25% { opacity: 1;}// lesshint spaceBeforeBrace: false
50% {transform: translate(110px, 0px); opacity: 1;}// lesshint spaceBeforeBrace: false
75% { opacity: 1;}// lesshint spaceBeforeBrace: false
100% {transform: translate(220px, 0); opacity: 0;}// lesshint spaceBeforeBrace: false
}
}
.bob() {
.animation-name(bob);
.animation-duration(3.2s);
.animation-iteration-count(infinite);
.animation-timing-function(ease-in-out);
@-webkit-keyframes bob {
0% {-webkit-transform: translate(0px);}// lesshint spaceBeforeBrace: false
50% {-webkit-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
100% {-webkit-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
}
@-moz-keyframes bob {
0% {-moz-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
50% {-moz-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
100% {-moz-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
}
@-o-keyframes bob {
0% {-o-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
50% {-o-transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
100% {-o-transform: translatey(0px);}// lesshint spaceBeforeBrace: false
}
@keyframes bob {
0% {transform: translatey(0px);}// lesshint spaceBeforeBrace: false
50% {transform: translatey(-7px);}// lesshint spaceBeforeBrace: false
100% {transform: translatey(0px);}// lesshint spaceBeforeBrace: false
}
}

View File

@@ -0,0 +1,13 @@
.btn-reset() {
border-top: none;
border-bottom: none;
border-left: none;
border-right: none;
background: transparent;
font-family: inherit;
cursor: pointer;
&:focus {
border-image: none;
outline: none;
}
}

View File

@@ -0,0 +1,17 @@
/**
* Color Variables
*/
@brand: #14acc2;
@error: #B53A03;
@text-normal: #000;
@text-muted: lighten(@text-normal, 60%);
@bg-lt-gray: #f1f1f1;
@border-lt-gray: darken(@bg-lt-gray, 5%);
@accent-lt-gray: darken(#fff, 5%);
@accent-md-gray: darken(#fff, 25%);
@accent-white: #fff;

View File

@@ -0,0 +1,13 @@
.container-sm() {
width: 100%;
max-width: 450px;
margin-left: auto;
margin-right: auto;
}
.container-md() {
width: 100%;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}

View File

@@ -0,0 +1,6 @@
@import 'colors.less';
@import 'typography.less';
@import 'buttons.less';
@import 'animations.less';
@import 'truncate.less';
@import 'containers.less';

View File

@@ -0,0 +1,5 @@
.truncate() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View File

@@ -0,0 +1,7 @@
// Font families:
@main-font: 'Lato', sans-serif;
@header-font: 'Lato', sans-serif;
// Font weights:
@bold: 700;
@normal: 400;

View File

@@ -0,0 +1,5 @@
[id='404'] {
//…
}

View File

@@ -0,0 +1,5 @@
[id='498'] {
//…
}

View File

@@ -0,0 +1,5 @@
[id='500'] {
//…
}

View File

@@ -0,0 +1,9 @@
#account-overview {
[purpose='remove-button'] {
color: @brand;
&:hover {
color: @text-normal;
}
}
}

View File

@@ -0,0 +1,5 @@
#edit-password {
//…
}

View File

@@ -0,0 +1,5 @@
#edit-profile {
//…
}

View File

@@ -0,0 +1,5 @@
#contact {
//…
}

View File

@@ -0,0 +1,5 @@
#welcome {
//…
}

View File

@@ -0,0 +1,5 @@
#confirmed-email {
//…
}

View File

@@ -0,0 +1,5 @@
#forgot-password {
//…
}

View File

@@ -0,0 +1,5 @@
#login {
//…
}

View File

@@ -0,0 +1,5 @@
#new-password {
//…
}

View File

@@ -0,0 +1,5 @@
#signup {
//…
}

View File

@@ -0,0 +1,11 @@
#faq {
@media (max-width: 500px) {
code {
word-break: break-all;
}
[purpose='placeholder'] {
word-break: break-all;
}
}
}

View File

@@ -0,0 +1,27 @@
#homepage {
[purpose='cloud-1'] {
.fly-fade();
opacity: 0;
}
[purpose='cloud-2'] {
.fly-fade();
.animation-delay(3.5s);
opacity: 0;
}
[purpose='ship'] {
.skid();
}
[purpose='more-info-text'] {
.bob();
}
[purpose='setup-step'] {
padding-left: 240px;
}
@media (max-width: 991px) {
[purpose='setup-step'] {
padding-left: 0px;
}
}
}

View File

@@ -0,0 +1,5 @@
#privacy {
//…
}

View File

@@ -0,0 +1,5 @@
#terms {
//…
}