Reputation: 1

How to make horizontal curve using css or jquery

I am developing a website for a client that has this kind of feature in which a user can select a seat, however I'm struggling on how could i make it curved like in the picture below

http://prntscr.com/nd77f1

So far I tried it in a table form below:

HTML

<table class="seats">
    <tr>
        <td>H</td>
        <td></td>
        <td></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td>G</td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td> 
    </tr>
    <tr>
        <td>F</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>E</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>D</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>C</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>B</td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td>
        <td><a href="#" class="busy"></a></td> 
    </tr>
    <tr>
        <td>A</td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
        <td><a href="#" class="available"></a></td>
    </tr>
    <tr>
        <td></td>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
        <td>11</td>
        <td>12</td>
        <td>13</td>
        <td>14</td>
        <td>15</td>
        <td>16</td>
        <td>17</td>
    </tr>
</table>

SCSS

.seats{
    display: inline-block;
    tr td{
        text-align: center;
        color: #89909C;
        font-size: 25px;
        padding: 20px 3px 0 3px;
    }
    a{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 21px;
        background: #89909C;
        border-radius: 100%;
        transition: 0.5s;
        &:after{
            content: '';
            position: absolute;
            top: 7px;
            left: 0;
            width: 40px;
            height: 21px;
            border-radius: 100%;
            border-bottom: 4px solid #89909C;
            transition: 0.5s;
        }
        &.selected{
            background: @color-red3 !important;
            &:after{
                border-color: @color-red3 !important;
            }
        }
        &.available{
            background: #89909C;
            &:after{
                border-color: #89909C;
            }
        }
        &.busy{
            background: #2B374E;
            &:after{
                border-color: #2B374E;
            }
        }
        &.family{
            background: @color-orange4;
            &:after{
                border-color: @color-orange4;
            }
        }
    }
}

I don't know which is good, whether to use list or table, but anyways as long as it is working is good to me. This is the codepen of my work https://codepen.io/nikkodelacruz/pen/LvQLje Hope someone could help me, thanks

Upvotes: 0

Answers (1)

Kayasit R.

Reputation: 191

Dealing with this amount of cell is not easy using pure HTML/CSS although it is achievable.

I see each column as a sub-component. Firstly, to make each column rotated by different degree, you need to restructure the DOM by column => cell rather than row => cell as regular table does.

Then I use JS to handle the huge amount of cell for me so I don't have to assign the rotation value for each column manually.

Down side of this is that you have to have fixed width and height for each cell.

let columnCount = document.querySelectorAll(".seats .column").length
    for(let i = 0; i< columnCount; i++){
        let el = document.querySelectorAll(".seats .column")[i]

        if(columnCount % 2 == 0) {
            let columnMiddle = document.querySelectorAll(".seats .column")[columnCount/2]
            var distance = columnMiddle.getBoundingClientRect().x - el.getBoundingClientRect().x
        } else {
            let columnMiddleLeft = document.querySelectorAll(".seats .column")[Math.floor(columnCount/2)]
            let columnMiddleRight = document.querySelectorAll(".seats .column")[Math.ceil(columnCount/2)]
            let averageMiddle = (columnMiddleLeft.getBoundingClientRect().x + columnMiddleRight.getBoundingClientRect().x)/2
            var distance = averageMiddle - el.getBoundingClientRect().x

        }
        el.style.transformOrigin = distance + "px 0"
        el.style.transform = "rotate(" + (columnCount/2-i) + "deg)"
    }

.seats {
  display: inline-block;
}

.seats tr td {
  text-align: center;
  color: #89909C;
  font-size: 25px;
  padding: 20px 3px 0 3px;
}

.seats a {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 21px;
  background: #89909C;
  border-radius: 100%;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.seats a:after {
  content: '';
  position: absolute;
  top: 7px;
  left: 0;
  width: 40px;
  height: 21px;
  border-radius: 100%;
  border-bottom: 4px solid #89909C;
  -webkit-transition: 0.5s;
  transition: 0.5s;
}

.seats a.selected {
  background: #E8564F !important;
}

.seats a.selected:after {
  border-color: #E8564F !important;
}

.seats a.available {
  background: #89909C;
}

.seats a.available:after {
  border-color: #89909C;
}

.seats a.busy {
  background: #2B374E;
}

.seats a.busy:after {
  border-color: #2B374E;
}

.seats a.family {
  background: #FFB548;
}

.seats a.family:after {
  border-color: #FFB548;
}

.seats {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 5rem;
}

.seats .seat {
  height: 40px;
  width: 60px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

<div class="seats">
        <div class="column">
                <div class="seat">H</div>
                <div class="seat">G</div>
                <div class="seat">F</div>
                <div class="seat">E</div>
                <div class="seat">D</div>
                <div class="seat">C</div>
                <div class="seat">B</div>
                <div class="seat">A</div>
                <div class="seat column-number"></div>
            </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">1</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">2</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">3</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">4</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">5</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">6</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">7</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">8</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">9</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">10</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">11</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">12</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">13</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">14</div>
        </div>
        <div class="column">
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">15</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">16</div>
        </div>
        <div class="column">
            <div class="seat"></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="busy"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat"><a href="#" class="available"></a></div>
            <div class="seat column-number">17</div>
        </div>
    </div>

https://codepen.io/krugtep/pen/rbJGYE

Upvotes: 1

How to make horizontal curve using css or jquery

Answers (1)

Related Questions