Skip to content

Commit

Permalink
Merge pull request #335 from DSACMS/refactor-org2-page
Browse files Browse the repository at this point in the history 
Refactor orgs page
  • Loading branch information
@DinneK
DinneK authored Feb 25, 2025
2 parents 2c11c7f + a34bd58 commit f8a805c
Show file tree
Hide file tree
Showing 4 changed files with 176 additions and 24 deletions.
9 changes: 4 additions & 5 deletions app/site/organizations.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ layout: base
<p>The Centers for Medicare and Medicaid Services is comprised of many GitHub Organizations.</p>
<ul class="usa-card-group-orgs">
{% for org in organizations %}
<!-- <li class="usa-card usa-card--flag desktop:grid-col-6"> -->
<li class="usa-card grid-col-5">
<li class="usa-card grid-col-5 usa-card-orgs">
<div class="usa-card-outer">
<div class="usa-card-middle">
<a href="{{ site.baseurl }}/{{ org.name }}/" class="href-home">
Expand All @@ -30,15 +29,15 @@ layout: base
<div class="usa-card__footer">
<span class="star-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="star-count-{{org.name}}-title" role="img">
<title id="github-{{org.name}}-title"> Repo Count</title>
{% lucide "folder-git-2" %}
<title id="github-{{org.name}}-title">Repo Count</title>
{% lucide "folder-git" %}
</svg>
<span> {{ org.repo_count }} </span>
</span>
<span class="fork-count" style="margin-right: 15px;">
<svg class="usa-icon" aria-labelledby="fork-count-{{org.name}}-title" role="img">
<title id="github-{{org.name}}-title"> Follower Count</title>
{% lucide "users-2" %}
{% lucide "git-fork" %}
</svg>
<span> {{ org.followers_count }} </span>
</span>
Expand Down
30 changes: 25 additions & 5 deletions app/site/projects.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,12 @@ layout: base
{% comment %} filter by organization {% endcomment %}
<div class="usa-accordion">
<div class="usa-accordion__heading filter-heading">
<button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">Organization</button>
<button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="organization-content" id="organization">
Organization
<svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
</svg>
</button>
</div>
<div id="organization-content" class="usa-accordion__content filter-content usa-prose" hidden>
<form class="usa-form">
Expand All @@ -46,7 +51,12 @@ layout: base
{% comment %} filter by maturity model tier {% endcomment %}
<div class="usa-accordion">
<div class="usa-accordion__heading filter-heading">
<button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="tier-content" id="mauturity-model-tier">Maturity Model Tier</button>
<button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="tier-content" id="mauturity-model-tier">
Maturity Model Tier
<svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
</svg>
</button>
</div>
<div id="tier-content" class="usa-accordion__content filter-content usa-prose" hidden>
<form class="usa-form">
Expand All @@ -67,7 +77,12 @@ layout: base
{% comment %} filter by fisma compliance level {% endcomment %}
<div class="usa-accordion">
<div class="usa-accordion__heading filter-heading">
<button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="fisma-level-content" id="fisma-level">FISMA Compliance Level</button>
<button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="fisma-level-content" id="fisma-level">
FISMA Compliance Level
<svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
</svg>
</button>
</div>
<div id="fisma-level-content" class="usa-accordion__content filter-content usa-prose" hidden>
<form class="usa-form">
Expand All @@ -88,7 +103,12 @@ layout: base
{% comment %} filter by project type {% endcomment %}
<div class="usa-accordion">
<div class="usa-accordion__heading filter-heading">
<button class="usa-accordion__button filter-button" aria-expanded="false" aria-controls="project-type-content" id="project-type">Project Type</button>
<button class="usa-accordion__button filter-button" aria-expanded="true" aria-controls="project-type-content" id="project-type">
Project Type
<svg class="usa-icon--size-3" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#expand_less"></use>
</svg>
</button>
</div>
<div id="project-type-content" class="usa-accordion__content filter-content usa-prose" hidden>
<form class="usa-form">
Expand Down Expand Up @@ -157,7 +177,7 @@ layout: base
<option value="ascending">Ascending</option>
<option value="descending">Descending</option>
</select>
<svg class="usa-icon filter-icon" aria-hidden="true" focusable="false" role="img">
<svg class="usa-icon filter-icon sort-icon" aria-hidden="true" focusable="false" role="img">
<use href="{{ site.baseurl }}/assets/img/sprite.svg#sort_arrow"></use>
</svg>
</div>
Expand Down
105 changes: 95 additions & 10 deletions app/src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ h1 {
background-color: #fff;
}

.menu-btn-styling:hover {
background-color: #fff;
}

/* Home page main */
.grid-container{
display: flex;
Expand Down Expand Up @@ -212,17 +216,18 @@ a.usa-link:visited {
/* Orgs */
.usa-card-group-orgs {
display: flex;
flex-direction: row;
flex-direction: column;
flex-wrap: wrap;
list-style-type:none;
/* list-style-type:none; */
justify-content: center;
width: 90vw;
}

.usa-card {
display: flex;
justify-content: center;
/* margin: 0 1% 0 1%; */
margin: 2%;
/* width: 90%; */
}

.usa-card__media {
Expand All @@ -243,21 +248,27 @@ a.usa-link:visited {
}

.usa-card__header-orgs {
margin: 15% 1% 10% 5%;
padding: 0;
margin-left: 5%;
}

.usa-card__heading-orgs {
font-size: 1.2em;
}

.usa-card__footer {
display: flex;
padding-bottom: 1.5rem;
padding-left: 0;
padding-right: 1.5rem;
padding-top: 0.5rem;
}

.star-count,
.fork-count {
display: flex;
align-items: center;
}

/* Projects */
#content-container {
margin-top: 5%;
Expand All @@ -274,7 +285,7 @@ a.usa-link:visited {
.search-block {
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}

.dashboard-container {
Expand All @@ -296,9 +307,9 @@ a.usa-link:visited {
z-index: 10;
}

section:active {
/* section:active {
border: #E7C000;
}
} */

.usa-search--small [type=submit], .usa-search--small .usa-search__submit {
padding-left: 0.75rem;
Expand All @@ -323,6 +334,10 @@ section:active {
border: none
}

#sort-direction {
width: 90%;
}

.sort-outer {
display: flex;
background-color: #E0EAF8;
Expand All @@ -340,6 +355,11 @@ section:active {
margin: 0 0 0 -20%;
}

.sort-icon {
margin-left: -30%;
margin-right: 8%;
}

.outer-project-template {
height: fit-content;
width: 90vw;
Expand Down Expand Up @@ -385,9 +405,10 @@ section:active {
border-radius: 50px 50px 0 0;
border: none;
font-weight: 600;
justify-content: center;
justify-content: space-between;
min-width: 215px;
padding: 7% 0 7% 0;
padding: 10%;
align-items: center;
}

.filter-button:hover {
Expand Down Expand Up @@ -600,6 +621,13 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
}

@media (max-width: 767px) {
.usa-header {
align-items: stretch;
}
.title {
width: 100vw;
}

.usa-nav {
display: none;
position: absolute;
Expand All @@ -624,6 +652,49 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
border: none;
cursor: pointer;
}

.filters-container {
margin-right: 0;
}

.filter-button {
min-width: 315px;
}

.filter-button[aria-expanded="false"] {
min-width: 315px;
}

.usa-accordion__heading {
font-size: 1.2rem;
}

.search-block {
align-items: center;
}

.sort-styling {
width: 75vw;
align-items: center;
}

.search-styling {
width: 58vw;
}

.sort-outer {
margin-left: 0;
width: 75vw;
}

.sort-icon {
margin-left: -21%;
margin-right: 5%;
}

/* .usa-card {
margin-left: -5%;
} */
}

@media (min-width: 768px) {
Expand Down Expand Up @@ -679,6 +750,16 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
}
}

@media (max-width: 1023px) {
.usa-card {
width: 100%;
}

.usa-card-orgs {
margin-left: -5%;
}
}

@media (min-width: 1024px) {
.usa-logo a{
font-size: 1.5em;
Expand Down Expand Up @@ -722,4 +803,8 @@ iframe:focus, [href]:focus, [tabindex]:focus, [contentEditable=true]:focus {
.home-icon-container {
height: 100px;
}

.usa-card-group-orgs {
flex-direction: row;
}
}
Loading

0 comments on commit f8a805c

Please sign in to comment.