Commit graph

11 commits

Author SHA1 Message Date
Seifeldin Mahjoub 688f27d959 chore: use color mixin in tabs 2020-08-10 01:21:36 +02:00
Seifeldin Mahjoub 36056e4737 Merge branch 'develop' into feature-dark-mode 2020-08-09 00:23:47 +02:00
Rhyne Vlaservich 4f7f6e8402 Fix linting in tabs 2020-08-01 16:13:50 -04:00
Rhyne 837c4321b9
Merge pull request #207 from Bajena/patch-1
Support multiple tab components
2020-08-01 15:32:53 -04:00
Jan Bajena 5ee5960e84
Support multiple tab components
Hi, first of all thank you for your cool framework. I really have fun working with it :)

I'm building an app for building flashcard sets in which I decided to use tabs component for switching between different languages. However I've noticed that current version assumes that there'll only be a single tab component on the page.

I overcame it in my project by changing `=` (attribute equals) selector to `$=` (attribute ends with) selector. 
This allows me to generate different tab IDs for different flashcards, like this:
```ruby
<% tab_name = "tabs_#{word.id}" %>
<% tab1_id = "#{tab_name}_tab1" %>
<% tab2_id = "#{tab_name}_tab2" %>

<div class="xs-12 sm-6 md-4 lg-3 col align-top flashcard-column">
  <div class="card">
    <div class="card-body">
      <div class="row tabs">
        <input id="<%= tab1_id %>" type="radio" name="<%= tab_name %>" checked>
        <label for="<%= tab1_id %>">Question</label>

        <input id="<%= tab2_id %>" type="radio" name="<%= tab_name %>">
        <label for="<%= tab2_id %>">Answer</label>

        <div id="<%= tab_name %>_content1" class="content">
          <h4 class="card-title flashcard-title"><%= word.question %></h4>
          <% if word.question_example %>
            <p class="card-text flashcard-example"><%= word.question_example %></p>
          <% end %>
        </div>
        <div id="<%= tab_name %>_content2" class="content">
          <h4 class="card-title flashcard-title"><%= word.answer %></h4>
          <% if word.answer_example %>
            <p class="card-text flashcard-example"><%= word.answer_example %></p>
          <% end %>
        </div>
      </div>
    </div>
  </div>
</div>
```

Here's a video to present how it works after the change:
https://www.loom.com/share/6de1e443314f44f49c7b91e9b5875c93

Hope someone finds it useful
2020-07-30 21:43:39 +02:00
Kevin Koester fc4ede380a
Fixes #202
Fixes Bug where the content would be aligned right next to the tabs on larger screens.

See: https://github.com/papercss/papercss/issues/202
2020-07-10 11:44:26 +02:00
= a7e099055c feat: add dark mode 2020-06-01 23:03:46 +02:00
rhyneav d2993557bc refactor for linting 2018-05-24 08:39:06 -04:00
koester 1212a2db8d Fixed broken components 2017-12-23 09:43:23 +01:00
koester e43261ea9f scss components 2017-12-19 17:52:52 +01:00
koester 621db8f23c scss components 2017-12-19 17:52:33 +01:00