Сделайте мои вкладки лучше на мобильных решениях с CSS - PullRequest
Новая
       5

Сделайте мои вкладки лучше на мобильных решениях с CSS

0 голосов
/ 04 марта 2020

У меня есть простое расписание, содержит две вкладки, день 1 и день2. Если вы установили браузер на мобильное возобновление, день 1 впереди, а другая кнопка ниже графика. Я пытаюсь добиться того, чтобы эти 2 вкладки были ниже друг друга. 

.trackHolder {
    max-width: 100%;
    margin: 0 auto;
    display: flex;
}

.column {
    margin: 10px;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
}

.trackHolder:nth-of-type(5) .column:first-of-type {
    flex-grow: 2;
    flex-shrink: 2;
    flex-basis: 22px;
}

.trackHolder:nth-of-type(6) .column:nth-of-type(2) {
    flex-grow: 4;
    flex-shrink: 4;
    flex-basis: 66px;
}

/* OTHER STYLES */

html, body {
    height: 100%;
    box-sizing: border-box;
}

body {
    font-family: "Raleway", sans-serif;
    padding: 10px;
}

.column {
    padding: 10px 0;
    background-color: rgba(255, 0, 0, 0.25);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.75);
    background-color: #70EA64;
    color: #000000;
}

.time {
    color: #4CAF50;
    font-style: oblique;
    padding-top: 8px;
    margin-right: 9px;
}

.naslovi {
    margin-left: 50px;
    font-size: 23px;
}

.pauzaRucak {
    background-color: #f5f5f5;
}

.pozvPred {
    background-color: #26c6da
}

.track1 {
    background-color: #ffa726;
    color: #000000;
}

.track2 {
    background-color: #B3E5FC;
    color: #000000;
}

.trackOtvaranje {
    background-color: #DB3F24;
    color: #fff;
}

.lokacijaTitle {
    font-size: 16px;
}

.column>p {
    padding: 5px;
}

@media(max-width: 768px) {
    .trackHolder {
        flex-direction: column;
    }
    .naslovi {
        margin-left: 9px!important;
        font-size: 19px!important;
    }
}

/* tabovi */

.tabs {
    display: flex;
    flex-wrap: wrap;
    background: #efefef;
    box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
}

.label {
    width: 100%;
    padding: 20px 30px;
    background: #e5e5e5;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    color: #7f7f7f;
    transition: background 0.1s, color 0.1s;
}

.label:hover {
    background: #d8d8d8;
}

.label:active {
    background: #ccc;
    box-shadow: inset 0px 0px 0px 2px #26c6da;
}

.input:focus+.label {
    box-shadow: inset 0px 0px 0px 2px #26c6da;
    z-index: 1;
}

.input:checked+.label {
    background: #fff;
    color: #000;
}

@media (min-width: 600px) {
    .label {
        width: auto;
    }
}

.panel {
    display: none;
    padding: 20px 30px 30px;
    background: #fff;
}

@media (min-width: 600px) {
    .panel {
        order: 99;
    }
}

.input:checked+.label+.panel {
    display: block;
}

.input {
    position: absolute;
    opacity: 0;
}
<div class="tabs"><input checked="checked" class="input" id="tab-1" name="tabs" type="radio" /> <label class="label"
            for="tab-1">This is day 1</label>
        <div class="panel">
            <div class="tab-content" id="tab-content1">
                <section class="trackHolder">
                    <h2 class="naslovi">Lorem1</h2>
                </section>

                <section class="trackHolder"><span class="time">08:00</span>

                    <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim
                        wolf. </div>
                </section>

                <section class="trackHolder"><span class="time">09:00</span>

                    <div class="column track1">
                        <h5 class="lokacijaTitle">SLorem titile</h5>
                        <small>09:00 10:30</small>

                        <p>HTC 1</p>

                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track2">
                        <h5 class="lokacijaTitle">ocavore whatever semiotics trust fund raw</h5>
                        <small>09:00 10:30</small>



                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track3">
                        <h5 class="lokacijaTitle">whatever semiotics</h5>
                        <small>09:00 10:30</small>

                        <p>HTC Cloud</p>

                        <p>ocavore whatever semiotics trust fund raw</p>
                    </div>
                </section>

                <section class="trackHolder"><span class="time">10:30</span>

                    <div class="column pauzaRucak">Launch</div>
                </section>

            </div>
        </div>
        <input class="input" id="tab-2" name="tabs" type="radio" /> <label class="label" for="tab-2">This is day
            2</label>

        <div class="panel">
            <div class="tab-content" id="tab-content1">
                <section class="trackHolder">
                    <h2 class="naslovi">Lorem2</h2>
                </section>

                <section class="trackHolder"><span class="time">08:00</span>

                    <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim
                        wolf. </div>
                </section>

                <section class="trackHolder"><span class="time">09:00</span>

                    <div class="column track1">
                        <h5 class="lokacijaTitle">SLorem titile</h5>
                        <small>09:00 10:30</small>

                        <p>HTC 1</p>

                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track2">
                        <h5 class="lokacijaTitle">ocavore whatever semiotics trust fund raw</h5>
                        <small>09:00 10:30</small>



                        <p>I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </p>
                    </div>

                    <div class="column track3">
                        <h5 class="lokacijaTitle">whatever semiotics</h5>
                        <small>09:00 10:30</small>

                        <p>HTC Cloud</p>

                        <p>ocavore whatever semiotics trust fund raw</p>
                    </div>
                </section>

                <section class="trackHolder"><span class="time">10:30</span>

                    <div class="column pauzaRucak">Launch</div>
                </section>
            </div>
        </div>
    </div>

Это то, чего я хочу достичь на мобильном телефоне:

enter image description here

Может кто-нибудь помочь мне с этим? Как настроить кнопки вкладок друг под другом?

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Вы можете переставить HTML, чтобы сначала были все вкладки, а затем панели.

Это означает, что вы не сможете использовать CSS для управления скрытием и отображением панелей. Вместо этого вы можете использовать немного JS. 

const tabsComponent = document.querySelector(".tabs");
const radios = tabsComponent.querySelectorAll(".input");

radios.forEach(radio =>
  radio.addEventListener("change", e => {
    const id = e.currentTarget.id.split("-")[1];
    const associatedQuery = `#panel${id}`;
    const associatedPanel = document.querySelector(associatedQuery);
    const previouslyShownPanel = tabsComponent.querySelector(`.showPanel`);

    previouslyShownPanel.classList.remove("showPanel");
    associatedPanel.classList.add("showPanel");
  })
);
.trackHolder {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
}

.column {
  margin: 10px;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

.trackHolder:nth-of-type(5) .column:first-of-type {
  flex-grow: 2;
  flex-shrink: 2;
  flex-basis: 22px;
}

.trackHolder:nth-of-type(6) .column:nth-of-type(2) {
  flex-grow: 4;
  flex-shrink: 4;
  flex-basis: 66px;
}


/* OTHER STYLES */

html,
body {
  height: 100%;
  box-sizing: border-box;
}

body {
  font-family: "Raleway", sans-serif;
  padding: 10px;
}

.column {
  padding: 10px 0;
  background-color: rgba(255, 0, 0, 0.25);
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.75);
  background-color: #70EA64;
  color: #000000;
}

.time {
  color: #4CAF50;
  font-style: oblique;
  padding-top: 8px;
  margin-right: 9px;
}

.naslovi {
  margin-left: 50px;
  font-size: 23px;
}

.pauzaRucak {
  background-color: #f5f5f5;
}

.pozvPred {
  background-color: #26c6da
}

.track1 {
  background-color: #ffa726;
  color: #000000;
}

.track2 {
  background-color: #B3E5FC;
  color: #000000;
}

.trackOtvaranje {
  background-color: #DB3F24;
  color: #fff;
}

.lokacijaTitle {
  font-size: 16px;
}

.column>p {
  padding: 5px;
}

@media(max-width: 768px) {
  .trackHolder {
    flex-direction: column;
  }
  .naslovi {
    margin-left: 9px!important;
    font-size: 19px!important;
  }
}


/* tabovi */

.tabs {
  display: flex;
  flex-wrap: wrap;
  background: #efefef;
  box-shadow: 0 48px 80px -32px rgba(0, 0, 0, 0.3);
}

.label {
  width: 100%;
  padding: 20px 30px;
  background: #e5e5e5;
  cursor: pointer;
  font-weight: bold;
  font-size: 18px;
  color: #7f7f7f;
  transition: background 0.1s, color 0.1s;
}

.label:hover {
  background: #d8d8d8;
}

.label:active {
  background: #ccc;
  box-shadow: inset 0px 0px 0px 2px #26c6da;
}

.input:focus+.label {
  box-shadow: inset 0px 0px 0px 2px #26c6da;
  z-index: 1;
}

.input:checked+.label {
  background: #fff;
  color: #000;
}

@media (min-width: 600px) {
  .label {
    width: auto;
  }
}

.panel {
  display: none;
  padding: 20px 30px 30px;
  background: #fff;
}

.input {
  position: absolute;
  opacity: 0;
}

.showPanel {
  display: block;
}
<div class="tabs">
  <input checked="checked" class="input" id="tab-1" name="tabs" type="radio" />
  <label class="label" for="tab-1">This is day 1</label>
  <input class="input" id="tab-2" name="tabs" type="radio" />
  <label class="label" for="tab-2">This is day 2</label>
  <div class="panel showPanel" id="panel1">
    <div class="tab-content">
      <section class="trackHolder">
        <h2 class="naslovi">Panel 1 Content</h2>
      </section>
      <section class="trackHolder"><span class="time">08:00</span>

        <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </div>
      </section>
    </div>
  </div>
  <div class="panel" id="panel2">
    <div class="tab-content">
      <section class="trackHolder">
        <h2 class="naslovi">Panel 2 Content</h2>
      </section>
      <section class="trackHolder"><span class="time">08:00</span>

        <div class="column pauzaRucak">I'm baby shabby chic locavore whatever semiotics trust fund raw denim wolf. </div>
      </section>
    </div>
  </div>
</div>
0 голосов
/ 04 марта 2020

Кажется, достаточно установить label, который представляет ваши вкладки <label class="label" for="tab-1">This is day 1</label> на width: 100%;

Вы можете использовать Медиа-запросы для применения указанных c кодовых блоков вашего CSS -Кода только для браузеров с определенным / макс / мин экраном / шириной окна.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...