0

HTML Responsive Grid-Container + Custom Buttons

I am new to HTML but I've spent many hours checking out posts and sample databases here and then tried to combine everything to create the features of my dreams :- )

Here I would like to share my outcome and at the same time ask the community to help improving it

In my demo DB you'll find "clients", "projects" and "appointments". On the dashboard there are responsive containers for each upcoming appointment, showing some selected data (client name, location, date, staff). And then there are two phosphor-buttons. When you click on the first line of the container, the corresponding appointment opens. the hammer opens the cor. project and the address-book opens the cor. client.

Here are some screenshots:

 it's fully responsive, here is how it looks on my smartphone:

 Now, maybe someone with html knowledge could help me:

I would like to re-arrange the different items within my container. the buttons should line up within a column on the right-hand-side like this:

 grid-container.ninox 

8 replies

null
    • Kruna
    • 8 mths ago
    • Reported - view

    Hi  here is my suggestion

     

    let term := (select Appointments where Status = 1);

    let icon := (select html);

    let css := "

        <style> 

         

      .grid-container {

        display:grid;

        grid-template-columns:repeat(auto-fill, minmax(20em, 1fr));

        grid-gap:20px;

    }

    .gridFormat{

        font-size:small;

        text-align:center;

        border-radius:.5em;

        padding:1em;

        color:white;

     

    }

     

     

    span:hover{

        cursor:pointer;

     

    }

     

    .gridOne {

    background-color:#5834b9;

     

     

    }

    #flex { 

                display: flex; 

                flex-direction: column; 

            } 

            #x { 

      display: flex;

    font-weight: bold;

      align-items: center;

      justify-content: center;

     

     

            } 

      

            #y { 

     display: flex;

    font-weight: bold;

      align-items: center;

      justify-content: center;

    margin:-10px;

            } 

      

      

        </style> 

     

    ";

    let content := ---

    <aside class = 'grid-container'>{ for aa in term do }

     

    <aside class =  'gridFormat gridOne'>

     

        <span onclick="ui.popupRecord('{ aa }')">

    <b>{ aa.Projects.Clients.Name }

       <span style="

        border-radius: .5em;

        background-color: red;

        ">{ aa.Location }</span></span>

     

    <br>

     

     

     </b>

    <body> 

     

        <div id="flex"> 

            <div id="x">Staff: { aa.StaffText }

     

    <span   onclick=ui.popupRecord('{ first((select Clients)[number(Nr) = aa.Projects.Clients]) }')>{ icon.butt1 }

    </span>

     

    </div> 

            <div id="y">Date: { aa.AppointText }

     

    <span   onclick=ui.popupRecord('{ first((select Projects)[number(Nr) = aa.Projects]) }')>{ icon.butt2 }

    </span>

     

    </div> 

           

        </div> 

    </body> 

     

       </aside>{ end }

    </aside>

    ---;

    html(css + content)

     

    I need to mention that I have no idea about html and stuff or lets say too Little to write a Code by myself.
    I just googled and found a script, which I adjusted by trying around.

    So surely there is a better and Professional solution :-))

    • Fred
    • 8 mths ago
    • Reported - view

    Learning something new today. I like the idea of grids in CSS. I found this website:

    So playing around I found this code is close to what you want.

    let term := (select Appointments where Status = 1);
let icon := (select html);
let css := "
<style>
.item1 {
    grid-area: Main;
    justify-self: center;
}
.item2 {grid-area: Side}
.grid-container {
    display: grid;
    grid-template-areas:
        'Main Side';
    gap: 10px;
    background-color:#5834b9;
    padding: 10px;
    color: white;
    grid-template-columns: 80% 20%;
}
.gridFormat{
    font-size:small;
    text-align:center;
    border-radius:.5em;
    padding:1em;
    color:white;
}
</style>
";
let content := ---
{ for loop1 in term do }
<div class = "grid-container">
    <div class="item1">{ loop1.Location }</div>
    <div class="item2"><span>{ icon.butt1 }</span><br>{ icon.butt2 }</div>

</div>{ end }
    ---;
html(css + content)

    The problem is that it builds the cards top to bottom.

    I'm sure you can figure out how to make it better.

      • gold_cat
      • 8 mths ago
      • Reported - view

       Invite Fred to help modify my database CSS. I want the yellow column to have the same height as the blue one, and to be aligned with the blue border (right now the yellow one is somewhat aligned to the left). Also, it should have the functionality to click and return to the DummyTab. Is it feasible? Thank you.

      table.ninox
    • lime_owl
    • 8 mths ago
    • Reported - view

    Mirko just posted a sample DB in the German forum and I used his much more organized code as a fundation to my own project:

    let apps := (select Appointments where Status = 1);
let buttons := (select html);
let css := "<style>
  .gridFirst {
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(20em, 1fr));
      column-gap:10px;
    row-gap:20px;
  }
  .gridSecond {
    display:grid;
    grid-template-columns:max-content auto max-content;
grid-template-rows:auto max-content;
  }
  .gridFormHead{font-weight:bold}
  .gridFormAll{
    box-shadow:-2px -2px inset dimgray;
      font-size:12px;
       padding:1em;
      border-radius:1em;
      color:darkslategray;
    background-color:rgb(230,230,230);
  }
  .gridFormAll:hover{
    background-color:hsl(93, 57%, 18%);
    cursor:pointer;
  }
  dd {text-align:right;margin:1px;}
de{margin:auto auto auto 1px;}
  dt{font-variant:small-caps;
text-align:left;}
  hr {color:darkgray;}
  </style>";
let body := ---
<aside class = 'gridFirst'>{ for app in apps do }
     <aside class='gridFormAll' >
      <aside class='gridFormHead'> <span  onclick=ui.popupRecord('{ app }')>  { app.Projects.Clients.Name } </span> </aside>
  <hr>
    <dl class='gridSecond'>
      <dt>{ buttons.butt4 }  </dt><de>  { app.AppointText }</de>   <dd><span      onclick=ui.popupRecord('{ first((select Clients)[number(Nr) = app.Projects.Clients]) }')>{ buttons.butt1 }</span> </dd>
      <dt>{ buttons.butt5 }</dt> <de> { app.StaffText }</de> <dd><span      onclick=ui.popupRecord('{ first((select Projects)[number(Nr) = app.Projects]) }')>{ buttons.butt2 }</span></dd>
      <dt>{ buttons.butt6 } </dt><de>{ app.Location }</de><dd> { buttons.butt3 }</dd>
    </dl>
    </aside>{ end }

  </aside>
    ---;
html(css + body)

    An here's how it looks like :)

     

    , this website is real nice! i am sure this, combined with the code above, will allow me to design the containers any way i want to

      • Rafael Sanchis
      • Rafael_Sanchis
      • 8 mths ago
      • Reported - view

      Hi

      You have available the htlm table ?

      • Rafael Sanchis
      • Rafael_Sanchis
      • 8 mths ago
      • Reported - view

       Hi

      I don't know why have problem with icons

      • lime_owl
      • 8 mths ago
      • Reported - view

      do you mean a sample DB? (Here you have to look for the "Dashboard"-Page, which is only visible in admin mode

      Under "html" you'll find more icons and that's also where you can ajust them (if you want them coloured in black e.g.)

      Kanban.ninox

      • Rafael Sanchis
      • Rafael_Sanchis
      • 8 mths ago
      • Reported - view

       Thanks 👍

Login to reply

Content aside

  • 8 mths agoLast active
  • 8Replies
  • 318Views
  • 5 Following