PlannerGenerator/src/lib/DayPartial.svelte

<script>
    export let dayOfWeek;
    export let date;
    export let month;
    export let year;
  
    function getOrdinalSuffix(date) {
      const suffixes = ["th", "st", "nd", "rd"];
      const v = date % 100;
      return date + (suffixes[(v - 20) % 10] || suffixes[v] || suffixes[0]);
    }
  </script>

  <div class="day-container">
    <div class="first-row">
      <div id="date">{dayOfWeek} {getOrdinalSuffix(date)} {month} {year}</div>
      <div id="code-freeze">Code Freeze Date:</div>
    </div>
    <div class="second-row">
        <div class="double-column">
            <div>
                <h3>Priorities</h3>
                <div class="light-lines">
                    {#each Array(10) as _, i}
                        <div class="light-line"></div>
                    {/each}
                </div>
            </div>
            <div>
                <h3>Schedule</h3>
                <div class="light-lines">
                    {#each Array(19) as _, i}
                        <div class="light-line"></div>
                    {/each}
                </div>
            </div>
          </div>
        <div>
            <div>
                <h3>Tasks</h3>
                <div class="light-lines">
                    {#each Array(32) as _, i}
                        <div class="light-line"></div>
                    {/each}
                </div>
            </div>
        </div>
        <div>
            <h3>Notes</h3>
            <div class="light-grid">
                {#each Array(35) as _, row}
                    <div class="grid-row">
                        {#each Array(18) as _, col}
                            <div class="light-cell"></div>
                        {/each}
                    </div>
                {/each}
            </div>
        </div>
    </div>
  </div>
  
  <style>
    .day-container {
      padding: 1rem;
      display: flex;
      flex-direction: column;
    }
  
    .first-row {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  
    #date {
      text-align: left;
      font-weight: 500;
    }
  
    #code-freeze {
      text-align: right;
      font-style: italic;
      margin-right: 95px;
    }
  
    .second-row {
      display: flex;
      justify-content: space-between;
      margin-top: 1rem;
    }

    .second-row > div {
        flex: 1; /* Each column takes up equal width */
        max-width: calc(33.33% - 5px); /* Max width for each column (1/3 of the page with a 5px gap) */
    }

    .double-column > div:first-child {
        margin-bottom: 10px;
    }
  
    .double-column {
      display: flex;
      flex-direction: column;
    }

    .double-column > div:nth-child(2) > div {
        position: relative;
    }

    .double-column > div:nth-child(2) > div::before {
        content: '';
        position: absolute;
        top: 0;
        left: 75px; /* Adjust the distance from the left */
        width: 1px;
        height: 100%;
        background-color: #ddd; /* Color of the vertical line */
        z-index: 1; /* Ensure the line is in front of the content */
    }
  
    @media print {
      .day-container {
        page-break-before: always;
      }
    }

  h3 {
    border-bottom: 1px solid #000; /* Full-width line color */
    padding-bottom: 10px;
    margin: 10px 0 0 0;
    font-variant: small-caps;
  }

  .light-lines {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }

  .light-line {
    height: 1px; /* Height of each light line */
    background-color: #ddd; /* Light line color */
    margin-top: 20px; /* Spacing between light lines */
  }

  .light-grid {
        display: flex;
        flex-direction: column;
        margin-top: 10px; /* Adjust spacing between "Notes" section and the grid */
    }

    .grid-row {
        display: flex;
    }

    .light-cell {
        width: 20px; /* Adjust the width of each cell */
        height: 20px; /* Adjust the height of each cell */
        border: 1px solid #eee; /* Border color for each cell */
        margin-right: -1px; /* Negative margin to overlap adjacent borders */
        margin-bottom: -1px; /* Negative margin to overlap adjacent borders */
        box-sizing: border-box; /* Include border in the element's total width and height */
    }
  </style>