Model Examples
    No edit summary
    No edit summary
    Line 42: Line 42:
    </div>
    </div>
    <style>
    <style>
    .container-model {
    .container-model {
       display: flex;
       display: flex;
    Line 48: Line 47:


    .sidebar {
    .sidebar {
       flex: 0 0 200px; /* Adjust the width as needed */
       flex: 0 0 200px;  
       padding: 20px;
       padding: 20px;
       display: flex;
       display: flex;
    Line 58: Line 57:
       font-size: 16px;
       font-size: 16px;
       font-weight: 500;
       font-weight: 500;
       margin-bottom: 10px; /* Space between menu items */
       margin-bottom: 10px;
       word-wrap: break-word;
       word-wrap: break-word;
    }
    }


    .card-container , .card-container-3 {
    .card-container, .card-container-3 {
       display: grid;
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-template-columns: repeat(3, 1fr);
    Line 78: Line 77:
       flex-direction: column;
       flex-direction: column;
       align-items: center;
       align-items: center;
       margin-bottom: 32px; /* Space between card rows */
       margin-bottom: 32px;
    }
    }


    Line 98: Line 97:
       font-size: 20px;
       font-size: 20px;
       font-weight: 700;
       font-weight: 700;
       margin-bottom: 10px; /* Adjust as needed */
       margin-bottom: 10px;
    }
    }


    Line 124: Line 123:
    }
    }


      .sidebar a {
    .sidebar a {
        display: block;
      display: block;
        color: #182933;
      color: #182933;
        text-decoration: none;
      text-decoration: none;
        margin-bottom: 10px;
      margin-bottom: 10px;
        padding-left: 20px;  
      padding-left: 20px;
        position: relative;
      position: relative;
        font-weight: 500;
      font-weight: 500;
    }
     
    .sidebar a.active {
      color: #1A50AD;
    }
     
    .sidebar a.active svg {
      position: absolute;
      left: 0;
      top: 0;
    }
     
    @media (max-width: 768px) {
      .sidebar, .search-container {
        display: none; /* Hide sidebar and search container on mobile */
       }
       }


       .sidebar a.active {
       .card-container, .card-container-3 {
         color: #1A50AD;  
         grid-template-columns: 1fr; /* Adjust grid for single column layout on mobile */
        max-width: none;
        padding: 0 20px;
        margin: 0; /* Reset margin to align cards properly */
       }
       }


       .sidebar a.active svg {
       .cards {
         position: absolute;
         width: auto; /* Allow cards to fill the available width */
         left: 0;
         margin: 10px; /* Add some space around cards */
        top: 0;
       }
       }
    }


    @media screen and (max-width: 768px) {
    .search-container {
        .container {
      display: flex;
          flex-direction: column;
      align-items: center;
        }
      border-radius: 4px;
      border: 1px solid #E3E8EE;
      background: #FFF;
      width: 951px;
      height: 36px;
      flex-shrink: 0;
    }


        .sidebar {
    .search-container input[type="search"] {
          width: 100%;
      border: none;
          flex-direction: row;
      outline: none;
          overflow-x: auto;
      width: 100%;
          white-space: nowrap;
      padding: 0 10px;
          padding-bottom: 10px;
      height: 100%;
          box-sizing: border-box;  
      color: #999B9E;
        }
    }


        .sidebar .menu-item {
    .search-container svg {
          display: inline-block;
      margin: 0 10px;
          margin-right: 10px;  
    }
        }


        .card-container, .card-container-3 {
    .search-container input::placeholder {
          grid-template-columns: 1fr;
      color: #999B9E;
          padding: 0 20px;
    }
          max-width: none;
        }


        .cards {
    .search-container input:focus {
          width: auto;
       border: none;
        }
      outline: none;
     
    }
        .menu-item {
          padding: 10px;
          font-size: 14px;
        }
     
        section h2, .card-container {
          margin-left: 0;
        }
      }
     
    @media (max-width: 768px) {
        .sidebar,
        .card-container,
        .card-container-3 {
          flex: 0 0 100%;
          max-width: 100%;
          margin-left: 0;
        }
     
        .card-container,
        .card-container-3 {
          grid-template-columns: 1fr;
        }
      }
     
      .search-container {
        display: flex;
        align-items: center;
        border-radius: 4px;
        border: 1px solid #E3E8EE;
        background: #FFF;
        width: 951px;
        height: 36px;
        flex-shrink: 0;
      }
     
      .search-container input[type="search"] {
        border: none;
        outline: none;
        width: 100%;
        padding: 0 10px;
        height: 100%;
        color: #999B9E; /* Placeholder text color */
      }
     
      .search-container svg {
        margin: 0 10px;
       }
     
      /* Change placeholder color */
      .search-container input::placeholder {
        color: #999B9E;
      }
     
      /* If you want to ensure that the input does not have border in any browser */
      .search-container input:focus {
        border: none;
        outline: none;
      }
    </style>
    </style>
    </head>
    </head>

    Revision as of 14:46, 9 November 2023

    This page was created by Edgar on 2023-11-02. Last edited by Stephanie@mdriven.net on 2025-03-26.

    Model Samples
    MODEL SAMPLES
    Get started with MDriven sample models. Explore our models and choose what you want to build.
    Complete models Another model Final model

    Complete Models

    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip

    Complete Models

    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip

    Complete Models

    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Test
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip
    Placeholder
    Base App
    You can use this as a starting point or you can merge it with most of the other examples and template models.
    Download .zip

    Retrieved from "https://wiki.mdriven.net/index.php?title=Documentation:Model_Examples&oldid=12843"

    © MDRIVEN . All Rights Reserved

    API Docs
    MDriven World | Portal | Blog | YouTube | StackOverflow | Facebook

    © MDRIVEN . All Rights Reserved