Skip to content

Commit

Permalink
First pass on app management UI
Browse files Browse the repository at this point in the history
  • Loading branch information
JohnONolan committed May 25, 2015
1 parent 3366df9 commit 3caa291
Show file tree
Hide file tree
Showing 8 changed files with 528 additions and 0 deletions.
263 changes: 263 additions & 0 deletions core/client/app/html/apps.html

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions core/client/app/styles/app.css
Original file line number Diff line number Diff line change
Expand Up @@ -41,3 +41,4 @@
@import "layouts/about.css";
@import "layouts/tags.css";
@import "layouts/error.css";
@import "layouts/packages.css";
256 changes: 256 additions & 0 deletions core/client/app/styles/layouts/packages.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,256 @@
/* Packages - Themes / Apps
/* ---------------------------------------------------------- */

.package-filter {
border-radius: 5px;
}
@media (max-width: 1460px) {
.package-filter {
max-width: 700px;
}
}


/* Main Layout
/* ---------------------------------------------------------- */

.package-grid {
display: flex;
flex-flow: row wrap;
align-items: space-between;
margin: -10px -10px 4vw -10px;
max-width: 1200px;
}


/* Package Card
/* ---------------------------------------------------------- */

.package-card-app {
flex: 1 1 500px;
overflow: hidden;
margin: 10px;
padding: 20px;
max-width: 700px;
border: rgba(0,0,0,0.1) 1px solid;
border-radius: 5px;
transition: background 0.3s ease;
}

.package-card-app:hover {
background: rgba(0,20,60,0.03);
cursor: pointer;
transition: background 0.1s ease;
}

.package-card-content {
display: flex;
}

.package-card-app-icon {
flex: 0 0 60px;
margin: 0 15px 0 0;
width: 60px;
height: 60px;
background-position: center center;
background-size: cover;
border-radius: 15%;
}

.package-card-meta {
position: relative;
display: flex;
flex-direction: column;
}

.package-card-app-title {
overflow: hidden;
margin: 0 0 4px 0;
padding: 0 70px 0 0;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.9rem;
font-weight: normal;
}

.package-card-stats {
position: absolute;
top: -5px;
right: 0;
display: flex;
align-items: center;
}

.package-downloads {
display: flex;
align-items: center;
height: 26px;
border: transparent 1px solid;
color: var(--midgrey);
font-size: 13px;
line-height: 24px;
}

.package-downloads:hover {
cursor: default;
}

.package-downloads i {
margin-right: 5px;
font-size: 15px;
}


.package-download-count {
font-size: 13px;
}

.package-card-app-desc {
display: -webkit-box;
overflow: hidden;
margin: 0;
padding: 0;
max-height: 4.2rem;
height: 38px;
color: var(--midgrey);
text-overflow: ellipsis;
font-size: 1.4rem;
line-height: 1.3em;
font-weight: 200;

-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
@media (min-width: 600px) and (max-width: 1460px) {
.package-card-app-desc {
padding-right: 80px;
}
}


/* Package Card Footer
/* ---------------------------------------------------------- */

.package-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
width: 100%;
}
@media (max-width: 540px) {
.package-card-footer {
flex-direction: column;
align-items: flex-start;
}
.package-card-footer .package-developer {
display: none;
}
}

.package-developer {
display: flex;
align-items: center;
color: var(--midgrey);
}

.package-developer:hover {
color: var(--blue);
}

.package-developer img {
flex-shrink: 0;
margin-right: 6px;
width: 20px;
height: 20px;
border-radius: 100%;
}

.package-developer-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 1.4rem;
}

.package-controls {
flex-shrink: 0;
display: flex;
overflow: hidden;
border: rgba(0,0,0,0.1) 1px solid;
border-radius: 4px;
}

.package-controls-button {
display: flex;
align-items: center;
padding: 7px 12px;
border-left: rgba(0,0,0,0.1) 1px solid;
background: #fff;
color: var(--midgrey);
font-size: 1.3rem;
line-height: 1;
transition: none;
}

.package-controls-button:first-child {
border: none;
}

.package-controls-button:hover {
color: var(--darkgrey);
}

.package-controls-button i {
margin-right: 5px;
width: 11px;
height: 11px;
font-size: 11px;
}

.package-disable {
border-right: var(--green) 3px solid;
}

.package-enable {
border-right: var(--red) 3px solid;
}


/* Media Queries
/* ---------------------------------------------------------- */

@media (max-width: 800px) {
.package-grid {
overflow: hidden;
margin: 0 0 4vw 0;
border: #e1e1e1 1px solid;
border-radius: 5px;
}

.package-card-app {
margin: 0;
border: none;
border-top: #e1e1e1 1px solid;
border-radius: 0;
}
.package-card-app:first-of-type {
border-top: none;
}
}

@media (max-width: 760px) {
.package-developer {
display: none;
}
.package-card-footer {
justify-content: flex-end;
}
}

@media (max-width: 600px) {
.package-grid {
margin: -5px -20px 4vw -20px;
border: none;
}
}
6 changes: 6 additions & 0 deletions core/client/app/styles/patterns/icons.css
Original file line number Diff line number Diff line change
Expand Up @@ -253,3 +253,9 @@
.icon-add2:before {
content: "\e045";
}
.icon-pause:before {
content: "\e046";
}
.icon-play:before {
content: "\e047";
}
Binary file modified core/client/public/assets/fonts/ghosticons.eot
Binary file not shown.
2 changes: 2 additions & 0 deletions core/client/public/assets/fonts/ghosticons.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified core/client/public/assets/fonts/ghosticons.ttf
Binary file not shown.
Binary file modified core/client/public/assets/fonts/ghosticons.woff
Binary file not shown.

0 comments on commit 3caa291

Please sign in to comment.