Model Examples
    No edit summary
    (Undo revision 12824 by Edgar (talk))
    Line 45: Line 45:
    .container {
    .container {
       display: flex;
       display: flex;
      flex-wrap: wrap; /* Allows sidebar to wrap under the content on smaller screens */
    }
    }


    .sidebar {
    .sidebar {
       flex: 0 0 200px;
       flex: 0 0 200px; /* Adjust the width as needed */
       padding: 20px;
       padding: 20px;
       display: flex;
       display: flex;
    Line 63: Line 62:
    }
    }


    .card-container, .card-container-3 {
    .card-container , .card-container-3 {
       display: grid;
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Makes the grid responsive */
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 32px;
       grid-gap: 32px;
       margin: 0 auto;
       margin: 0 auto;
       padding: 0 20px; /* Add padding to maintain spacing on smaller screens */
       max-width: 960px;
    }
    }


    .cards {
    .cards {
      width: 296px;
       background: white;
       background: white;
       border-radius: 6px;
       border-radius: 6px;
    Line 124: Line 124:
    }
    }


    .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 {
      .sidebar a.active {
      color: #1A50AD;  
        color: #1A50AD;  
    }
      }


    .sidebar a.active svg {
      .sidebar a.active svg {
      position: absolute;
        position: absolute;
      left: 0;
        left: 0;
      top: 0;
        top: 0;
    }
      }


    @media (max-width: 767px) {
    @media (max-width: 767px) {
      .sidebar {
        .sidebar,
        width: 100%; /* Full width on mobile */
        .card-container,
        order: -1; /* Sidebar on top on mobile */
        .card-container-3 {
      }
          flex: 0 0 100%;
          max-width: 100%;
          margin-left: 0;
        }


      .sidebar a {
        .card-container,
        padding-left: 0.5em; /* Smaller left padding on mobile */
        .card-container-3 {
          grid-template-columns: 1fr;
        }
       }
       }


       .card-container, .card-container-3 {
       .search-container {
         grid-template-columns: 1fr; /* Single column layout on mobile */
         display: flex;
      }
        align-items: center;
     
        border-radius: 4px;
      .cards {
        border: 1px solid #E3E8EE;
         width: auto; /* Full width cards on mobile */
        background: #FFF;
         box-sizing: border-box; /* Include padding and border in width */
        width: 951px;
         height: 36px;
         flex-shrink: 0;
       }
       }
        
        
       .search-container {
       .search-container input[type="search"] {
         width: calc(100% - 40px); /* Adjust the width to account for padding */
         border: none;
         margin: 0 auto; /* Center the search container */
         outline: none;
         flex-direction: column; /* Stack the search elements on top of each other */
         width: 100%;
         padding: 0 10px;
         padding: 0 10px;
        height: 100%;
        color: #999B9E; /* Placeholder text color */
       }
       }
     
        
       .search-container input[type="search"],
       .search-container svg {
       .search-container svg {
        flex: none; /* Disable flex on mobile for these elements */
         margin: 0 10px;
        width: auto; /* Adjust width to fit content */
         margin: 8px 0; /* Add some margin top and bottom */
       }
       }
        
        
       .search-container input[type="search"] {
      /* Change placeholder color */
         order: 2; /* Ensure input is placed after the search icon on mobile */
       .search-container input::placeholder {
         color: #999B9E;
       }
       }
     
     
       .search-container svg {
      /* If you want to ensure that the input does not have border in any browser */
         order: 1; /* Search icon goes on top on mobile */
       .search-container input:focus {
         border: none;
        outline: none;
       }
       }
    }
    /* Ensure input takes up available space and looks well on all devices */
    .search-container input[type="search"] {
      flex-grow: 1;
      border: none;
      outline: none;
      padding: 0 10px;
      height: 36px; /* Fixed height for better control */
      color: #999B9E; /* Placeholder text color */
      width: calc(100% - 20px); /* Full width minus padding */
    }
    .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:29, 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=12840"

    © MDRIVEN . All Rights Reserved

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

    © MDRIVEN . All Rights Reserved