#40 Update table presentation on downloads
Merged 3 years ago by arrfab. Opened 3 years ago by areguera.
centos/ areguera/centos.org master  into  master

file modified
+1 -1
@@ -1,1 +1,1 @@ 

- .brands{color:#313437;background-color:#fff}.brands a{display:block;text-align:center;padding:40px 0}.brands a img{display:inline-block;margin:10px 20px;vertical-align:middle}.breadcrumb-item a,.breadcrumb-item span a,.centos-banner p,.navigation-clean.navbar-dark .navbar-nav .nav-link:focus,.navigation-clean.navbar-dark .navbar-nav .nav-link:hover{color:#fff}.footer-basic{padding:40px 0;background-color:#fff;color:#4b4c4d}.footer-basic ul{padding:0;list-style:none;text-align:center;font-size:18px;line-height:1.6;margin-bottom:0}.footer-basic li{padding:0 10px}.footer-basic ul a,.footer-clean ul a{color:inherit;text-decoration:none;opacity:.8}.footer-basic ul a:hover,.footer-clean ul a:hover,.highlight-clean .buttons .btn:hover{opacity:1}.footer-basic .social{text-align:center;padding-bottom:25px}.footer-basic .social>a{font-size:24px;width:40px;height:40px;line-height:40px;display:inline-block;text-align:center;border-radius:50%;border:1px solid #ccc;margin:0 8px;color:inherit;opacity:.75}.footer-basic .social>a:hover,.footer-clean .item.social>a:hover,.footer-dark .item.social>a:hover{opacity:.9}.footer-basic .copyright{margin-top:15px;text-align:center;font-size:13px;color:#aaa;margin-bottom:0}.jumbotron.text-white{margin-top:1.5em;margin-bottom:1.3em}#carousel-1{margin-bottom:1.5em}.breadcrumb,.footer-dark{margin-top:1.5em}.footer-clean{padding:50px 0;color:#4b4c4d}.footer-clean h3,.footer-dark h3{margin-top:0;margin-bottom:12px;font-weight:700;font-size:16px}.footer-clean ul,.footer-dark ul{padding:0;list-style:none;line-height:1.6;font-size:14px;margin-bottom:0}.footer-clean .item.social{text-align:right}@media (max-width:768px){.footer-clean .item.social{text-align:center}}.footer-clean .item.social>a{font-size:24px;width:40px;height:40px;line-height:40px;display:inline-block;text-align:center;border-radius:50%;border:1px solid #ccc;margin-left:10px;margin-top:22px;color:inherit;opacity:.75}.footer-clean .copyright{margin-top:14px;margin-bottom:0;font-size:13px;opacity:.6}.footer-dark{padding:50px 0;color:#f0f9ff;background-color:#282d32}.footer-dark ul a{color:inherit;text-decoration:none;opacity:.6}.footer-dark ul a:hover{opacity:.8}.footer-dark .item.text{margin-bottom:36px}.footer-dark .item.text p{opacity:.6;margin-bottom:0}.footer-dark .item.social,.highlight-clean .buttons{text-align:center}@media (max-width:991px){.footer-clean .item.social>a{margin-top:40px}.footer-dark .item.social{text-align:center;margin-top:20px}}.footer-dark .item.social>a{font-size:20px;width:36px;height:36px;line-height:36px;display:inline-block;text-align:center;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.4);margin:0 8px;color:#fff;opacity:.75}.footer-dark .copyright{text-align:center;padding-top:24px;opacity:.3;font-size:13px;margin-bottom:0}.highlight-clean{color:#313437;background-color:#fff;padding:50px 0}.highlight-clean p{color:#7d8285}.highlight-clean h2{font-weight:700;margin-bottom:25px;line-height:1.5;padding-top:0;margin-top:0;color:inherit}.highlight-clean .intro{font-size:16px;max-width:500px;margin:0 auto 25px}.highlight-clean .buttons .btn{padding:16px 32px;margin:6px;border:none;background:#ddd;box-shadow:none;text-shadow:none;opacity:.9;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.4px;line-height:1;outline:0}.highlight-clean .buttons .btn:active{transform:translateY(1px)}.highlight-clean .buttons .btn-primary{background-color:#055ada;color:#fff}.navigation-clean{background:#fff;padding-top:.75rem;padding-bottom:.75rem;color:#333;border-radius:0;box-shadow:none;border:none;margin-bottom:0}.navigation-clean .navbar-brand{font-weight:700;color:inherit}.navigation-clean .navbar-brand:hover{color:#222}.navigation-clean.navbar-dark .navbar-brand:hover{color:#f0f0f0}.navigation-clean .navbar-brand img{height:100%;display:inline-block;margin-right:10px;width:auto}.navigation-clean .navbar-toggler{border-color:#ddd;color:#888}.navigation-clean .navbar-toggler:focus,.navigation-clean .navbar-toggler:hover{background:0 0}.navigation-clean.navbar-dark .navbar-toggler{border-color:#555;color:#eee}.navigation-clean .form-inline,.navigation-clean .navbar-collapse{border-top-color:#ddd}.navigation-clean.navbar-dark .form-inline,.navigation-clean.navbar-dark .navbar-collapse{border-top-color:#333}.navigation-clean .navbar-nav>.active>a,.navigation-clean .navbar-nav>.show>a{background:0 0;box-shadow:none}.navigation-clean.navbar-dark .navbar-nav a.active,.navigation-clean.navbar-dark .navbar-nav a.active:focus,.navigation-clean.navbar-dark .navbar-nav a.active:hover,.navigation-clean.navbar-light .navbar-nav .nav-link.active,.navigation-clean.navbar-light .navbar-nav .nav-link.active:focus,.navigation-clean.navbar-light .navbar-nav .nav-link.active:hover{color:#8f8f8f;box-shadow:none;background:0 0;pointer-events:none}.navigation-clean.navbar .navbar-nav .nav-link{padding-left:18px;padding-right:18px}.navigation-clean.navbar-light .navbar-nav .nav-link{color:#465765}.navigation-clean.navbar-light .navbar-nav .nav-link:focus,.navigation-clean.navbar-light .navbar-nav .nav-link:hover{color:#37434d!important;background-color:transparent}.navigation-clean .navbar-nav>li>.dropdown-menu{margin-top:-5px;box-shadow:none;background-color:#fff;border-radius:2px}@media (min-width:768px){.navigation-clean{padding-top:1rem;padding-bottom:1rem}.navigation-clean .navbar-nav .show .dropdown-menu{box-shadow:0 4px 8px rgba(0,0,0,.1)}}.navigation-clean .dropdown-menu .dropdown-item,.navigation-clean .dropdown-menu .dropdown-item:focus{line-height:2;color:#37434d}.navigation-clean .dropdown-menu .dropdown-item:focus,.navigation-clean .dropdown-menu .dropdown-item:hover{background:#eee;color:inherit}.navigation-clean.navbar-dark{color:#fff;background-color:#37434d}.navigation-clean.navbar-dark .navbar-nav .nav-link{color:#dfe8ee}.navigation-clean.navbar-dark .dropdown-menu .dropdown-item,.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus{color:#f2f5f8}.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus,.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:hover{background:rgba(255,255,255,.15)}@media (max-width:767px){.brands a{padding:30px 0}.footer-clean .item,.footer-dark .item:not(.social){text-align:center;padding-bottom:20px}.footer-clean .item.social>a{margin-top:10px}.footer-dark .item.text{margin-bottom:0}.navigation-clean .navbar-nav .show .dropdown-menu .dropdown-item{color:#37434d;padding-top:.8rem;padding-bottom:.8rem;line-height:1}.navigation-clean.navbar-dark .navbar-nav .show .dropdown-menu .dropdown-item{color:#fff}}#myInput{background-image:url(/assets/img/search-solid.png);background-position:10px;background-repeat:no-repeat;width:100%;padding:12px 20px 12px 50px;border:1px solid #ddd;margin-top:12px;border-top:0;border-left:0;border-right:0}#myTable{border-collapse:collapse;width:100%;border:1px solid #ddd;font-size:small}#myTable td,#myTable th{text-align:left;padding:12px}#myTable tr{border-bottom:1px solid #ddd}#myTable tr.header,#myTable tr:hover{background-color:#f1f1f1}.scrolled{background-color:rgba(0,0,0,.9)!important;-webkit-transition:background-color .5s linear;-moz-transition:background-color .5s linear;-ms-transition:background-color .5s linear;transition:background-color .5s linear}body,html{scroll-padding-top:90px}#table-container-table th{cursor:pointer}#table-container-table th.sorting_asc{background:url(/assets/img/arrow_asc.gif ) right center no-repeat rgba(0,0,0,0);padding-right:30px}#table-container-table th.sorting_desc{background:url(/assets/img/arrow_desc.gif ) right center no-repeat rgba(0,0,0,0);padding-right:30px}.dataTables_info{white-space:nowrap}.breadcrumb{background-color:transparent;padding-left:0;padding-top:0;border-radius:0;font-size:small;margin-top:0}.breadcrumb a,.section-nav a{color:gray}.centos-banner{background-image:url(/assets/img/centos-motif.png);background-color:transparent;background-size:cover}.btn .btn-light .btn-lg{color:#000;font-weight:600}.btn-group-lg>.btn,.btn-lg{margin-right:15px;margin-bottom:15px}.centos-banner-home{padding-top:222px;padding-bottom:150px;margin-bottom:50px}.centos-banner-page{padding-top:168px;padding-bottom:96px}.centos-banner h1{font-weight:600;color:#fff}.centos-content{background-color:#fff;margin-top:50px}.centos-content h2{font-weight:700;border-bottom:1px solid #000}.section-nav{position:sticky;top:72px;align-self:start;padding-top:25px;font-size:small;margin-top:-25px}.section-nav ul{padding-left:1.5em}.footer-clean{margin-top:50px;background-color:#f1f1f1}div#table-container-table_filter.dataTables_filter{margin-top:1em;margin-bottom:1em;font-size:1.25em}nav.navbar.navbar-dark{background-color:#000}.card{margin:10px;border:none}div.card img{height:50px;object-fit:contain} 

\ No newline at end of file

+ .brands{color:#313437;background-color:#fff}.brands a{display:block;text-align:center;padding:40px 0}.brands a img{display:inline-block;margin:10px 20px;vertical-align:middle}.breadcrumb-item a,.breadcrumb-item span a,.centos-banner p,.navigation-clean.navbar-dark .navbar-nav .nav-link:focus,.navigation-clean.navbar-dark .navbar-nav .nav-link:hover{color:#fff}.footer-basic{padding:40px 0;background-color:#fff;color:#4b4c4d}.footer-basic ul{padding:0;list-style:none;text-align:center;font-size:18px;line-height:1.6;margin-bottom:0}.footer-basic li{padding:0 10px}.footer-basic ul a,.footer-clean ul a{color:inherit;text-decoration:none;opacity:.8}.footer-basic ul a:hover,.footer-clean ul a:hover,.highlight-clean .buttons .btn:hover{opacity:1}.footer-basic .social{text-align:center;padding-bottom:25px}.footer-basic .social>a{font-size:24px;width:40px;height:40px;line-height:40px;display:inline-block;text-align:center;border-radius:50%;border:1px solid #ccc;margin:0 8px;color:inherit;opacity:.75}.footer-basic .social>a:hover,.footer-clean .item.social>a:hover,.footer-dark .item.social>a:hover{opacity:.9}.footer-basic .copyright{margin-top:15px;text-align:center;font-size:13px;color:#aaa;margin-bottom:0}.jumbotron.text-white{margin-top:1.5em;margin-bottom:1.3em}#carousel-1{margin-bottom:1.5em}.breadcrumb,.footer-dark{margin-top:1.5em}.footer-clean{padding:50px 0;color:#4b4c4d}.footer-clean h3,.footer-dark h3{margin-top:0;margin-bottom:12px;font-weight:700;font-size:16px}.footer-clean ul,.footer-dark ul{padding:0;list-style:none;line-height:1.6;font-size:14px;margin-bottom:0}.footer-clean .item.social{text-align:right}@media (max-width:768px){.footer-clean .item.social{text-align:center}}.footer-clean .item.social>a{font-size:24px;width:40px;height:40px;line-height:40px;display:inline-block;text-align:center;border-radius:50%;border:1px solid #ccc;margin-left:10px;margin-top:22px;color:inherit;opacity:.75}.footer-clean .copyright{margin-top:14px;margin-bottom:0;font-size:13px;opacity:.6}.footer-dark{padding:50px 0;color:#f0f9ff;background-color:#282d32}.footer-dark ul a{color:inherit;text-decoration:none;opacity:.6}.footer-dark ul a:hover{opacity:.8}.footer-dark .item.text{margin-bottom:36px}.footer-dark .item.text p{opacity:.6;margin-bottom:0}.footer-dark .item.social,.highlight-clean .buttons{text-align:center}@media (max-width:991px){.footer-clean .item.social>a{margin-top:40px}.footer-dark .item.social{text-align:center;margin-top:20px}}.footer-dark .item.social>a{font-size:20px;width:36px;height:36px;line-height:36px;display:inline-block;text-align:center;border-radius:50%;box-shadow:0 0 0 1px rgba(255,255,255,.4);margin:0 8px;color:#fff;opacity:.75}.footer-dark .copyright{text-align:center;padding-top:24px;opacity:.3;font-size:13px;margin-bottom:0}.highlight-clean{color:#313437;background-color:#fff;padding:50px 0}.highlight-clean p{color:#7d8285}.highlight-clean h2{font-weight:700;margin-bottom:25px;line-height:1.5;padding-top:0;margin-top:0;color:inherit}.highlight-clean .intro{font-size:16px;max-width:500px;margin:0 auto 25px}.highlight-clean .buttons .btn{padding:16px 32px;margin:6px;border:none;background:#ddd;box-shadow:none;text-shadow:none;opacity:.9;text-transform:uppercase;font-weight:700;font-size:13px;letter-spacing:.4px;line-height:1;outline:0}.highlight-clean .buttons .btn:active{transform:translateY(1px)}.highlight-clean .buttons .btn-primary{background-color:#055ada;color:#fff}.navigation-clean{background:#fff;padding-top:.75rem;padding-bottom:.75rem;color:#333;border-radius:0;box-shadow:none;border:none;margin-bottom:0}.navigation-clean .navbar-brand{font-weight:700;color:inherit}.navigation-clean .navbar-brand:hover{color:#222}.navigation-clean.navbar-dark .navbar-brand:hover{color:#f0f0f0}.navigation-clean .navbar-brand img{height:100%;display:inline-block;margin-right:10px;width:auto}.navigation-clean .navbar-toggler{border-color:#ddd;color:#888}.navigation-clean .navbar-toggler:focus,.navigation-clean .navbar-toggler:hover{background:0 0}.navigation-clean.navbar-dark .navbar-toggler{border-color:#555;color:#eee}.navigation-clean .form-inline,.navigation-clean .navbar-collapse{border-top-color:#ddd}.navigation-clean.navbar-dark .form-inline,.navigation-clean.navbar-dark .navbar-collapse{border-top-color:#333}.navigation-clean .navbar-nav>.active>a,.navigation-clean .navbar-nav>.show>a{background:0 0;box-shadow:none}.navigation-clean.navbar-dark .navbar-nav a.active,.navigation-clean.navbar-dark .navbar-nav a.active:focus,.navigation-clean.navbar-dark .navbar-nav a.active:hover,.navigation-clean.navbar-light .navbar-nav .nav-link.active,.navigation-clean.navbar-light .navbar-nav .nav-link.active:focus,.navigation-clean.navbar-light .navbar-nav .nav-link.active:hover{color:#8f8f8f;box-shadow:none;background:0 0;pointer-events:none}.navigation-clean.navbar .navbar-nav .nav-link{padding-left:18px;padding-right:18px}.navigation-clean.navbar-light .navbar-nav .nav-link{color:#465765}.navigation-clean.navbar-light .navbar-nav .nav-link:focus,.navigation-clean.navbar-light .navbar-nav .nav-link:hover{color:#37434d!important;background-color:transparent}.navigation-clean .navbar-nav>li>.dropdown-menu{margin-top:-5px;box-shadow:none;background-color:#fff;border-radius:2px}@media (min-width:768px){.navigation-clean{padding-top:1rem;padding-bottom:1rem}.navigation-clean .navbar-nav .show .dropdown-menu{box-shadow:0 4px 8px rgba(0,0,0,.1)}}.navigation-clean .dropdown-menu .dropdown-item,.navigation-clean .dropdown-menu .dropdown-item:focus{line-height:2;color:#37434d}.navigation-clean .dropdown-menu .dropdown-item:focus,.navigation-clean .dropdown-menu .dropdown-item:hover{background:#eee;color:inherit}.navigation-clean.navbar-dark{color:#fff;background-color:#37434d}.navigation-clean.navbar-dark .navbar-nav .nav-link{color:#dfe8ee}.navigation-clean.navbar-dark .dropdown-menu .dropdown-item,.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus{color:#f2f5f8}.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:focus,.navigation-clean.navbar-dark .dropdown-menu .dropdown-item:hover{background:rgba(255,255,255,.15)}@media (max-width:767px){.brands a{padding:30px 0}.footer-clean .item,.footer-dark .item:not(.social){text-align:center;padding-bottom:20px}.footer-clean .item.social>a{margin-top:10px}.footer-dark .item.text{margin-bottom:0}.navigation-clean .navbar-nav .show .dropdown-menu .dropdown-item{color:#37434d;padding-top:.8rem;padding-bottom:.8rem;line-height:1}.navigation-clean.navbar-dark .navbar-nav .show .dropdown-menu .dropdown-item{color:#fff}}#myInput{background-image:url(/assets/img/search-solid.png);background-position:10px;background-repeat:no-repeat;width:100%;padding:12px 20px 12px 50px;border:1px solid #ddd;margin-top:12px;border-top:0;border-left:0;border-right:0}#myTable td{border-bottom:1px solid #ddd}.scrolled{background-color:rgba(0,0,0,.9)!important;-webkit-transition:background-color .5s linear;-moz-transition:background-color .5s linear;-ms-transition:background-color .5s linear;transition:background-color .5s linear}body,html{scroll-padding-top:90px}#table-container-table th{cursor:pointer}#table-container-table th.sorting_asc{background:url(/assets/img/arrow_asc.gif ) right center no-repeat rgba(0,0,0,0);padding-right:30px}#table-container-table th.sorting_desc{background:url(/assets/img/arrow_desc.gif ) right center no-repeat rgba(0,0,0,0);padding-right:30px}.dataTables_info{white-space:nowrap}.breadcrumb{background-color:transparent;padding-left:0;padding-top:0;border-radius:0;font-size:small;margin-top:0}.breadcrumb a,.section-nav a{color:gray}.centos-banner{background-image:url(/assets/img/centos-motif.png);background-color:transparent;background-size:cover}.btn .btn-light .btn-lg{color:#000;font-weight:600}.btn-group-lg>.btn,.btn-lg{margin-right:15px;margin-bottom:15px}.centos-banner-home{padding-top:222px;padding-bottom:150px;margin-bottom:50px}.centos-banner-page{padding-top:168px;padding-bottom:96px}.centos-banner h1{font-weight:600;color:#fff}.centos-content{background-color:#fff;margin-top:50px}.centos-content h2{font-weight:700;border-bottom:1px solid #000}.section-nav{position:sticky;top:72px;align-self:start;padding-top:25px;font-size:small;margin-top:-25px}.section-nav ul{padding-left:1.5em}.footer-clean{margin-top:50px;background-color:#f1f1f1}div#table-container-table_filter.dataTables_filter{margin-top:1em;margin-bottom:1em;font-size:1.25em}nav.navbar.navbar-dark{background-color:#000}.card{margin:10px;border:none}div.card img{height:50px;object-fit:contain} 

\ No newline at end of file

file modified
+10 -10
@@ -23,23 +23,23 @@ 

  

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for image...">

  

- <table id="myTable" class="table table-borderless">

+ <table id="myTable" class="table table-borderless table-hover">

  <thead class="thead-dark">

    <tr>

-     <th class="col-1">Version</th>

-     <th class="col-1">Region</th>

-     <th class="col-1">Architecture</th>

-     <th class="col-7">AMI ID</th>

-     <th class="col-1 text-nowrap">Deploy link</th>

+     <th class="col-0 text-nowrap">Version</th>

+     <th class="col-0 text-nowrap">Region</th>

+     <th class="col-0 text-nowrap">Architecture</th>

+     <th class="col-12 text-nowrap">AMI ID</th>

+     <th class="col-0 text-nowrap">Deploy link</th>

    </tr>

  </thead>

  <tbody>

  {% for row in site.data.aws-images %}

    <tr>

-     <td>{{ row["Version"] }}</td>

-     <td>{{ row["Region"] }}</td>

-     <td>{{ row["Architecture"] }}</td>

-     <td>{{ row["AMI ID"] }}</td>

+     <td class="text-nowrap">{{ row["Version"] }}</td>

+     <td class="text-nowrap">{{ row["Region"] }}</td>

+     <td class="text-nowrap">{{ row["Architecture"] }}</td>

+     <td class="text-nowrap">{{ row["AMI ID"] }}</td>

      <td class="text-nowrap"><a href="{{ row["Deploy link"] }}"><i class="fab fa-aws"></i> Deploy link</a></td>

    </tr>

  {% endfor %}

file modified
+7 -7
@@ -12,15 +12,15 @@ 

  

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for mirror...">

  

- <table id="myTable" class="table table-borderless">

+ <table id="myTable" class="table table-borderless table-hover">

  <thead class="thead-dark">

    <tr>

-     <th class="col-1">Location</th>

-     <th class="col-1">Region</th>

-     <th class="col-7">Sponsor</th>

-     <th class="col-1">HTTP</th>

-     <th class="col-1">HTTPS</th>

-     <th class="col-1">Rsync</th>

+     <th class="col-0">Location</th>

+     <th class="col-0">Region</th>

+     <th class="col-12">Sponsor</th>

+     <th class="col-0">HTTP</th>

+     <th class="col-0">HTTPS</th>

+     <th class="col-0">Rsync</th>

    </tr>

  </thead>

  <tbody>

file modified
+7 -7
@@ -14,15 +14,15 @@ 

  

  <input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search for mirror...">

  

- <table id="myTable" class="table table-borderless">

+ <table id="myTable" class="table table-borderless table-hover">

  <thead class="thead-dark">

    <tr>

-     <th class="col-1">Location</th>

-     <th class="col-1">Region</th>

-     <th class="col-7">Sponsor</th>

-     <th class="col-1">HTTP</th>

-     <th class="col-1">HTTPS</th>

-     <th class="col-1">Rsync</th>

+     <th class="col-0">Location</th>

+     <th class="col-0">Region</th>

+     <th class="col-12">Sponsor</th>

+     <th class="col-0">HTTP</th>

+     <th class="col-0">HTTPS</th>

+     <th class="col-0">Rsync</th>

    </tr>

  </thead>

  <tbody>

Fix download table alignment on firefox and chrome

- Previously, the column alignment in the download table was presented
  differently in firefox and chrome. This update corrects that visual
  glitch by changing the col value from 1 to 0 in narrow columns and
  from 7 to 12 on the wider one.

- Previously, we were using a customized css as main visual definition
  of download table. This update relies more on bootstrap main
  definition using .table-hover and .table-borderless; and changes the
  custom css to print the bottom border of table data only.

- Previously, the table was rendered with small texts looking for space
  for the content. However there is enough horizontal space for text to
  be in the normal size. This update makes the table text to inherit the
  page default text size, which make the page more homogeneous on
  reading.

Update aws-images table presentation

- Previously, the content of version column in aws-images page was
  wrapped creating two lines which makes reading slower. This update
  changes the aws-images table presentation to make version information
  in one line by adding text-nowrap class to version, region and
  architecture columns.

Tested locally and rendering fine. LGTM and so merging.
BTW, as you have also rights to merge here, and that's it's about design, I think that it's good to let you directly merge your own changes, when it relates to design changes ;-)

Pull-Request has been merged by arrfab

3 years ago