From fbca6a76262a1d9d2d3e9c0d4b5b500a6e59129b Mon Sep 17 00:00:00 2001 From: victor-heliomar Date: Fri, 22 Dec 2023 18:16:33 -0400 Subject: [PATCH] feat: added first settings to FE repositories page --- .stylelintrc.json | 12 ++++++++- client/layouts/index.hbs | 7 +++-- client/main.hbs | 8 +++--- client/partials/repository.hbs | 13 +++++++++ public/style.css | 19 ++++++++++++- public/styles/home/home.css | 6 +++++ public/styles/partials/repository.css | 29 ++++++++++++++++++++ public/styles/utils/buttons.css | 31 +++++++++++++++++++++ public/styles/utils/grid.css | 12 +++++++++ public/{ => styles/utils}/reset.css | 0 public/variables.css | 39 +++++++++++++++++++++++++++ server/controllers/home.js | 2 +- server/index.js | 1 + 13 files changed, 171 insertions(+), 8 deletions(-) create mode 100644 client/partials/repository.hbs create mode 100644 public/styles/home/home.css create mode 100644 public/styles/partials/repository.css create mode 100644 public/styles/utils/buttons.css create mode 100644 public/styles/utils/grid.css rename public/{ => styles/utils}/reset.css (100%) create mode 100644 public/variables.css diff --git a/.stylelintrc.json b/.stylelintrc.json index 0657681..7c430f6 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -216,10 +216,20 @@ "selector-pseudo-element-no-unknown": true, "selector-type-case": "lower", "selector-type-no-unknown": true, + "selector-class-pattern": "^[a-z]+([a-z0-9-]+[a-z0-9]+)*(__[a-z0-9]+([a-z0-9-]+[a-z0-9]+)*)?(--[a-z0-9]+([a-z0-9-]+[a-z0-9]+)*)?$", "shorthand-property-no-redundant-values": true, "string-no-newline": true, "time-min-milliseconds": 10, "unit-no-unknown": true, - "value-keyword-case": "lower" + "value-keyword-case": "lower", + "color-function-notation": [ + "legacy", + { + "ignore": [ + "with-var-inside" + ] + } + ], + "alpha-value-notation": "number" } } diff --git a/client/layouts/index.hbs b/client/layouts/index.hbs index 0a29555..9291deb 100644 --- a/client/layouts/index.hbs +++ b/client/layouts/index.hbs @@ -8,6 +8,9 @@ - {{{body}}} +

QA Exposed Server

+
+ {{{body}}} +
- \ No newline at end of file + diff --git a/client/main.hbs b/client/main.hbs index a2a93e8..92b4292 100644 --- a/client/main.hbs +++ b/client/main.hbs @@ -1,3 +1,5 @@ -{{#each repositories}} -
Current Branch of {{name}}: {{currentBranch}}
-{{~/each}} \ No newline at end of file +
+ {{#each repositories}} + {{> repository name=name description=description currentBrach=currentBrach}} + {{~/each}} +
diff --git a/client/partials/repository.hbs b/client/partials/repository.hbs new file mode 100644 index 0000000..412236d --- /dev/null +++ b/client/partials/repository.hbs @@ -0,0 +1,13 @@ +
+
+ {{name}} +
+
+ Branch: {{currentBranch}} +
+
+ +
+
diff --git a/public/style.css b/public/style.css index 3e62421..cb2e6d4 100644 --- a/public/style.css +++ b/public/style.css @@ -1,9 +1,26 @@ -@import url("reset.css"); +@import url("variables.css"); +@import url("styles/utils/buttons.css"); +@import url("styles/utils/reset.css"); +@import url("styles/utils/grid.css"); +@import url("styles/home/home.css"); +@import url("styles/partials/repository.css"); .hidden { display: none !important; } +.main { + max-width: var(--breakpoint-large); + margin: 0 auto; +} + +.page-title { + max-width: var(--breakpoint-large); + margin: 0 auto; + padding: var(--spacing-base); + text-align: center; +} + @media (prefers-reduced-motion: reduce) { body { animation: none; diff --git a/public/styles/home/home.css b/public/styles/home/home.css new file mode 100644 index 0000000..f2702f1 --- /dev/null +++ b/public/styles/home/home.css @@ -0,0 +1,6 @@ +.repositories { + --grid-item-width: 200px; + --grid-gap: var(--spacing-xlarge); + + padding: var(--spacing-base); +} diff --git a/public/styles/partials/repository.css b/public/styles/partials/repository.css new file mode 100644 index 0000000..6a895f2 --- /dev/null +++ b/public/styles/partials/repository.css @@ -0,0 +1,29 @@ +.repository { + display: flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + border: var(--border-base); + border-radius: var(--border-radius-base); +} + +.repository__name { + margin: var(--spacing-base); + font-size: calc(var(--font-size-base, 16px) * 1.5); + text-align: center; +} + +.repository__branch { + margin: var(--spacing-base); + font-size: var(--font-size-base); + text-align: center; +} + +.repository__action-button { + margin: var(--spacing-base); + justify-self: end; +} + +.repository__expose-button { + --button-size: 10px; +} diff --git a/public/styles/utils/buttons.css b/public/styles/utils/buttons.css new file mode 100644 index 0000000..aa3e032 --- /dev/null +++ b/public/styles/utils/buttons.css @@ -0,0 +1,31 @@ +button { + --button-size: 5px; + --hover-bg-color: rgba(var(--color-primary), 0.8); + --hover-color: rgb(var(--color-secondary)); + + padding: var(--button-size) calc(var(--button-size) * 2); + border: var(--border-base); + border-radius: var(--border-radius-base); + background-color: rgb(var(--color-primary)); + color: rgb(var(--color-secondary)); + cursor: pointer; + transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; +} + +button.primary { + background-color: rgb(var(--color-primary)); + color: rgb(var(--color-secondary)); +} + +button.secondary { + --hover-bg-color: rgba(var(--color-secondary), 0.8); + --hover-color: rgba(var(--color-primary), 0.8); + + background-color: rgb(var(--color-secondary)); + color: rgb(var(--color-primary)); +} + +button:hover { + background-color: var(--hover-bg-color); + color: var(--hover-color); +} diff --git a/public/styles/utils/grid.css b/public/styles/utils/grid.css new file mode 100644 index 0000000..fcd3eca --- /dev/null +++ b/public/styles/utils/grid.css @@ -0,0 +1,12 @@ +.grid-auto-fill { + --grid-item-width: 100px; + --grid-gap: 10px; + + display: grid; + grid-template-columns: repeat( + auto-fill, + minmax(var(--grid-item-width, 200px), 1fr) + ); + gap: var(--grid-gap, 10px); + margin: 0 auto; +} diff --git a/public/reset.css b/public/styles/utils/reset.css similarity index 100% rename from public/reset.css rename to public/styles/utils/reset.css diff --git a/public/variables.css b/public/variables.css new file mode 100644 index 0000000..6ecca1e --- /dev/null +++ b/public/variables.css @@ -0,0 +1,39 @@ +:root { + --background: 255, 255, 255; + --color-primary: 0, 0, 0; + --color-secondary: 255, 255, 255; + + /* Borders */ + --border-base: 1px solid rgb(var(--color-primary)); + --border-radius-base: 3px; + + /* Spacing */ + --spacing-base: 10px; + --spacing-large: 20px; + --spacing-xlarge: 40px; + + /* Breakpoints */ + --breakpoint-small: 600px; + --breakpoint-medium: 900px; + --breakpoint-large: 1200px; + + /* Font sizes */ + --font-size-base: 16px; + --font-size-large: 24px; + --font-size-xlarge: 32px; + + /* Font weights */ + --font-weight-base: 400; + --font-weight-bold: 700; + + /* Line heights */ + --line-height-base: 1.5; + --line-height-large: 1.2; + --line-height-xlarge: 1.1; + + /* Shadows */ + --color-shadow: 0, 0, 0; + --shadow-base: 0 0 5px rgba(var(--color-shadow), 0.1); + --shadow-large: 0 0 10px rgba(var(--color-shadow), 0.1); + --shadow-xlarge: 0 0 15px rgba(var(--color-shadow), 0.1); +} diff --git a/server/controllers/home.js b/server/controllers/home.js index f2ef5ea..f3d1bd1 100644 --- a/server/controllers/home.js +++ b/server/controllers/home.js @@ -16,4 +16,4 @@ const renderHomeView = (req, res) => { module.exports = { renderHomeView -}; \ No newline at end of file +}; diff --git a/server/index.js b/server/index.js index b6c8969..612c29d 100644 --- a/server/index.js +++ b/server/index.js @@ -7,6 +7,7 @@ const { renderHomeView } = require('./controllers/home'); const handlebars = create({ layoutsDir: './client/layouts', extname: ".hbs", + partialsDir: './client/partials', }) app.engine('hbs', handlebars.engine);