Skip to content
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.

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

Adding Repositories landing page to the project #11

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
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
12 changes: 11 additions & 1 deletion .stylelintrc.json
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
7 changes: 5 additions & 2 deletions client/layouts/index.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,9 @@
<link rel="stylesheet" type="text/css" href="./style.css" />
</head>
<body>
{{{body}}}
<h1 class="page-title">QA Exposed Server</h1>
<main class="main">
{{{body}}}
</main>
</body>
</html>
</html>
8 changes: 5 additions & 3 deletions client/main.hbs
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
{{#each repositories}}
<div>Current Branch of {{name}}: {{currentBranch}}</div>
{{~/each}}
<div class="repositories grid-auto-fill">
{{#each repositories}}
{{> repository name=name description=description currentBrach=currentBrach}}
{{~/each}}
</div>
13 changes: 13 additions & 0 deletions client/partials/repository.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<div class="repository">
<div class="repository__name">
{{name}}
</div>
<div class="repository__branch">
Branch: {{currentBranch}}
</div>
<div class="repository__action-button">
<button class="repository__expose-button primary">
Expose project
</button>
</div>
</div>
19 changes: 18 additions & 1 deletion public/style.css
Original file line number Diff line number Diff line change
@@ -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;
Expand Down
6 changes: 6 additions & 0 deletions public/styles/home/home.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
.repositories {
--grid-item-width: 200px;
--grid-gap: var(--spacing-xlarge);

padding: var(--spacing-base);
}
29 changes: 29 additions & 0 deletions public/styles/partials/repository.css
Original file line number Diff line number Diff line change
@@ -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;
}
31 changes: 31 additions & 0 deletions public/styles/utils/buttons.css
Original file line number Diff line number Diff line change
@@ -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);
}
12 changes: 12 additions & 0 deletions public/styles/utils/grid.css
Original file line number Diff line number Diff line change
@@ -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;
}
File renamed without changes.
39 changes: 39 additions & 0 deletions public/variables.css
Original file line number Diff line number Diff line change
@@ -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);
}
2 changes: 1 addition & 1 deletion server/controllers/home.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,4 +16,4 @@ const renderHomeView = (req, res) => {

module.exports = {
renderHomeView
};
};
1 change: 1 addition & 0 deletions server/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down