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.

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

WIP - Website redesign rfc #142

Closed
wants to merge 5 commits into from
Closed

WIP - Website redesign rfc #142

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e863937
Update header nav
jenweber Nov 16, 2019
8b14660
Fix buttons and tiles on landing page
jenweber Nov 16, 2019
e8c7fbf
clean out unused css
jenweber Nov 16, 2019
b40a0f4
use footer on every page
jenweber Nov 16, 2019
3760fb4
Pin styleguide version to 4.0.0-1
jenweber Nov 16, 2019
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
108 changes: 1 addition & 107 deletions app/styles/app.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,6 @@
@charset "utf-8";
@import 'loading-cube';

/* Navbar */
.navbar {
.navbar-toggler {
font-size: 16px;
border: none;
outline: 0;
}

.dropdown-item {
width: auto;
}
}

.help-wanted-links {
padding: 20px;

@media screen and (max-width: 768px) {
.es-button {
width: auto;
}
}
}

.github-issue-link {
border-bottom: solid 2px;
margin-right: 8px;
}

.github-issue-table {
border-collapse: collapse;
margin-top: 3px;
Expand All @@ -40,26 +12,19 @@
}

thead th {
font-size: 1.2em;
font-weight: 400;
text-align: left;
}

thead th:nth-child(1) {
width: 15vw;
}

tbody td:nth-child(1) {
font-weight: 200;
}

tbody tr {
background-color: #fefefe;
border-top: 1px solid #e1e4e8;
font-weight: 500;

&:hover {
background-color: #d25f461f;
background-color: #F4F6F8;
}
}
tbody tr:last-child {
Expand Down Expand Up @@ -111,15 +76,6 @@

.prose {
height: 100%;
background: url('../images/ember-bkg.svg');

.herounit {
display: flex;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 40vh;
}

.searchbox {
outline: 0;
Expand All @@ -129,80 +85,18 @@
border-radius: 5px;
border: thin solid lightgray;
}

.section {
background-color: white;
padding: 30px 0 30px;

.container {
width: auto;
}

p {
font-size: 16px;
line-height: 25px;
}
}
}

.footer {
.container {
width: auto;
}

.footer-tagline {
padding: 0 !important;
}
}

.search-box {
margin: 20px;
}

.total-issues {
margin-left: 20px;
margin-bottom: 5px;
font-size: 80%;
display: inline-block;
}

//temporary fix for mobile menu - remove this when ember-styleguide navbar is used.
.mobile-menu__tray a {
border-bottom: 1px solid lightgray;
display: block;
padding: 1em 0.5em;
text-align:center;
}
// tile
.tile {
min-height: 150px;
border-radius: 5px;
margin: 10px;
padding-top: 10px;
padding-bottom: 10px;
box-shadow: 0 6px 16px 0 lightgray;
}

.linkbutton {
position: absolute;
padding-bottom: 10px;
bottom: 0;
}

/* Should Remove when adding support for Bootstrap 4*/
.d-flex {
display: flex;
}

.flex-column {
flex-direction: column;
}

.es-header {
.container {
width: auto;
}
}
//Table display for mobile view
@media only screen and (max-width: 900px) {
thead {
Expand Down
7 changes: 3 additions & 4 deletions app/templates/application.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{{#es-header}}
{{#es-navbar }}
{{/es-navbar}}
{{/es-header}}
<EsHeader />

{{outlet}}

<EsFooter />
48 changes: 25 additions & 23 deletions app/templates/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,29 +1,33 @@
<div class="prose">
<div class="herounit">
<img src="../images/ember-help-wanted-logo.svg" alt="Image">
<div class="help-wanted-links">
{{#each this.navLinks.navLinks as |link|}}
<a href={{link.href}}>{{es-button label=link.name isTiny=true}}</a>
{{/each}}
</div>
<div class="bg-dark">
<section class="container text-center">
<img src="../images/ember-help-wanted-logo.svg" alt="Image" class="margin-bottom-medium">
<div class="help-wanted-links">
{{#each this.navLinks.navLinks as |link|}}
<a href={{link.href}} class="es-button margin-bottom-small">{{link.name}}</a>
{{/each}}
</div>
</section>
</div>
<div class="section">
<div class="article container d-flex flex-column">
<div class="margin-vertical-large">
<div class="article container">
{{#es-heading}}
Repositories with help-wanted issues
{{/es-heading}}
<div class="row">
{{#each this.model as | repo |}}
<div class="col-sm-3 tile d-flex flex-column">
<div class="">{{repo.displayName}}</div><br>
<div class="">Forks: {{#if (not repo.forks)}} No forks {{else}} {{repo.forks}} {{/if}}</div>
<div class="linkbutton">
<a href={{repo.htmlUrl}} target="_blank" rel="noopener">
Take me there
</a>
</div>
</div>
{{/each}}
<ul class="list-unstyled layout">
{{#each this.model as | repo |}}
<EsCard class="lg:col-2 tile">
<div class="">{{repo.displayName}}</div>
<div class="">Forks: {{#if (not repo.forks)}} No forks {{else}} {{repo.forks}} {{/if}}</div>
<div class="margin-top-medium">
<a href={{repo.htmlUrl}} target="_blank" rel="noopener">
Take me there
</a>
</div>
</EsCard>
{{/each}}
</ul>
</div>
</div>
<div class="article container">
Expand Down Expand Up @@ -65,6 +69,4 @@
<div class="subarticle"></div>
</div>
</div>
</div>

<EsFooter />
</div>
82 changes: 42 additions & 40 deletions app/templates/issues.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,46 @@
<div class="help-wanted-links">
<a href="/">{{es-button label="All Issues" isTiny=true}}</a>
{{#each this.navLinks.navLinks as |link|}}
<a href={{link.href}}>{{es-button label=link.name isTiny=true}}</a>
{{/each}}
<div class="container">
<div class="help-wanted-links">
<a href="/" class="es-button margin-bottom-small">All Issues</a>
{{#each this.navLinks.navLinks as |link|}}
<a href={{link.href}} class="es-button margin-bottom-small">{{link.name}}</a>
{{/each}}
</div>
<form {{action "searchByWildcard" this.queryInput on="submit"}} class="search-box margin-vertical-large">
{{input value=this.queryInput}} <button type="submit">Search</button>
{{#if this.label}}
<span class="current-filter-label">
{{label-with-emoji this.label}}
<button class="github-label-button" {{action (mut this.label) null}}>x</button>
</span>
{{/if}}
</form>
</div>
<form {{action "searchByWildcard" this.queryInput on="submit"}} class="search-box">
{{input value=this.queryInput}} <button type="submit">Search</button>
{{#if this.label}}
<span class="current-filter-label">
{{label-with-emoji this.label}}
<button class="github-label-button" {{action (mut this.label) null}}>x</button>
</span>
{{/if}}
</form>

<span class="total-issues">{{pluralize this.model.length "issue"}} displayed</span>

<table class="github-issue-table">
<thead>
<tr>
<th>Project</th>
<th>Title</th>
</tr>
</thead>
<tbody>
{{#each this.model as |issue|}}
<tr>
<td><a target="_blank" rel="noopener" href={{issue.repositoryHtml}}>{{issue.repositoryName}}</a></td>
<td>
<a target="_blank" rel="noopener" class="github-issue-link" href={{issue.htmlUrl}}>{{issue.title}}</a>
<div class="total-issues small">{{pluralize this.model.length "issue"}} displayed</div>

{{#each issue.labels as |lb|}}
<button class="github-label-button" {{action (mut this.label) lb.name}}>
{{github-label label=lb.name labelColor=lb.color}}
</button>
{{/each}}
<br>
#{{issue.number}} updated {{moment-from-now issue.updatedAt}}
</td>
<table class="github-issue-table">
<thead>
<tr class="medium regular">
<th>Project</th>
<th>Title</th>
</tr>
{{/each}}
</tbody>
</table>
</thead>
<tbody>
{{#each this.model as |issue|}}
<tr>
<td><a class="medium" target="_blank" rel="noopener" href={{issue.repositoryHtml}}>{{issue.repositoryName}}</a></td>
<td>
<a target="_blank" rel="noopener" href={{issue.htmlUrl}}>{{issue.title}}</a>

{{#each issue.labels as |lb|}}
<button class="github-label-button" {{action (mut this.label) lb.name}}>
{{github-label label=lb.name labelColor=lb.color}}
</button>
{{/each}}
<br>
#{{issue.number}} updated {{moment-from-now issue.updatedAt}}
</td>
</tr>
{{/each}}
</tbody>
</table>
5 changes: 3 additions & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@
"ember-resolver": "^5.0.1",
"ember-sass-bootstrap": "^0.2.0",
"ember-source": "~3.11.0",
"ember-styleguide": "^3.1.1",
"ember-styleguide": "4.0.0-1",
"eslint": "^6.0.1",
"eslint-plugin-ember": "^6.7.0",
"eslint-plugin-ember-suave": "^2.0.0",
Expand All @@ -63,7 +63,8 @@
"loader.js": "^4.7.0",
"morgan": "^1.3.2",
"normalize.css": "^8.0.1",
"qunit-dom": "^0.9.0"
"qunit-dom": "^0.9.0",
"sass": "^1.23.6"
},
"engines": {
"node": "6.* || 8.* || >= 10.*"
Expand Down
16 changes: 0 additions & 16 deletions public/images/ember-bkg.svg
View file
Open in desktop

This file was deleted.

Loading