Added grid styles, Comments column and Modal (Part 1)

Styles Overview

Classes added:

.grid_container refers to a grid that contains cells , css: display: grid; iterative responsive classes:
.columns-i and column-fill-i where i can be any number between 1 and 32 , and they can also have tailwind like responsive behavior with the tags sm: md: lg: xl: in front of them example:

columns-1
lg:columns-2
grid_container

sm:column-fill-1
md:column-fill-2
lg:column-fill-2
xl:column-fill-2

.columns-i will detemine how many columns a grid container has. example:

<div class="grid_container columns-2" > 
      <div> Lorem </div>
      <div> Lorem </div>
</div>

means the div will divide the grid in 2 columns

.column-fill-i will detemine how many columns an element inside a grid_contanier will occupy. example:

<div class="grid_container columns-12" > 
      <div class="column-fill-6" > Lorem </div>
      <div class="column-fill-6" > Lorem </div>
</div>

will divide the grid in 12 columns but it will seem as there are only 2 since each element occupies 6 columns

Responsive behavior

follows the same size rule as Tailwind where the sm md lg xl tags translate to:

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

Package changes

Added Two functions:

addParameterToURL( url,name,value)
addAuth( param_url )

To add to the url the values in settings.github_client_id and settings.github_client_secret to client_id and client_secret in the api request to avoid getting time out by the Github api. To get this values you can create a GitHub app in the Github Developer Settings

Comment reading code see here

It adds to each issue the field el_comments which is an array/table that contains the author name and body of all of the comments in the issue.

Modal to "Show More"

Html Structure

Added a basic css modal styles, The modal will close once clicked outside, with a modal structured like this:

<input hidden id="unique_id" type="checkbox">
<label shadow for="unique_id"></label>
<div cont_modal>
    <div modal data_label="comments">
                  Data to Show
    </div>
</div>
 <label show_more for="unique_id">Show More</label>

with the repective classes in the _style files working example can be see here

Implemented in

And currently this modal was added for the columns of body and comments , also giving the table rows a max height so when the content is too long to be read the user can click to "show more" and read all the content in the modal.

jazzdotdev / issues