search

weathertopper / family-photo-project

0 stars 0 forks source link

Event Styling #28

Closed weathertopper closed 7 years ago

weathertopper commented 7 years ago

I was messing around on w3schools and wanted to save this somewhere...

<!DOCTYPE html>
<html>
<head>
<style>
table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 80%
}

td {
    text-align: left;
    word-wrap: normal
    padding: 8px;
}

td:nth-child(odd) {
    border-right: 3px solid purple;
}

.dot{
    width: 10px;
    height: 10px;
    background-color: purple;
    border-radius: 10px;
    position: relative;
}

.dot:hover{
    width:15px;
    height: 15px;
}

.col1 .dot{
    float: right;
    right: -16px;
}

.col1 .dot:hover{
    float: right;
    right: -19px;
}

.col2 .dot{
    float: left;
    left: -16px;
}

.col2 .dot:hover{
    float: left;
    left: -19px;
}

.col1{
    text-align: right;
    padding-right: 10px;
}

.col2{
    text-align: left;
    padding-left: 10px;
}

</style>
</head>
<body>

<table>
  <tr>
    <td class = "col1"><div class = "dot"></div></td>
    <td class = "col2">Maria Anders some long string that i hope will break into more than one word but i'm not sure yet, we'll just have to see</td>
  </tr>
  <tr>
    <td class = "col1">Centro comercial Moctezuma some long string that i hope will break into more than one word but i'm not sure yet, we'll just have to see</td>
    <td class = "col2"><div class = "dot"></div></td>
  </tr>
  <tr>
    <td class = "col1"><div class = "dot"></div></td>
    <td class = "col2">Roland Mendel some long string that i hope will break into more than one word but i'm not sure yet, we'll just have to see</td>
  </tr>
  <tr>
    <td class = "col1">Island Trading some long string that i hope will break into more than one word but i'm not sure yet, we'll just have to see</td>
    <td class = "col2"><div class = "dot"></div></td>
  </tr>
  <tr>
    <td class = "col1"><div class = "dot"></div></td>
    <td class = "col2">Yoshi Tannamuri some long string that i hope will break into more than one word but i'm not sure yet, we'll just have to see</td>
  </tr>
  <tr>
    <td class = "col1">Magazzini Alimentari Riuniti some long string that i hope will break into more than one word but i'm not sure yet, we'll just have to see</td>
    <td class = "col2"><div class = "dot"></div></td>
  </tr>
</table>

</body>
</html>

EDIT: added hover dot grow

weathertopper commented 7 years ago

hover over dot for menu about deleting/tagging/editing event, methinks. Also make the dot grow on hover

weathertopper commented 7 years ago

^^ ok so that blows because resizing blows when the dot is in one of the data columns. I've still got to try it with different lengths of data, but I reckon this'll still be much better

HTML

<table>
  <tbody>
    <tr>
      <td class='col1'>a</td>
      <td class='col2'>
        <div class='line'>
          <div class = 'dot'>
          </div>
        </div>
      </td>
      <td class='col3'>a</td>
    </tr>
    <tr>
      <td class='col1'>a</td>
      <td class='col2'>
        <div class='line'>
          <div class = 'dot'>
          </div>
        </div>
      </td>
      <td class='col3'>a</td>
    </tr>
    <tr>
      <td class='col1'>a</td>
      <td class='col2'>
        <div class='line'>
          <div class = 'dot'>
          </div>
        </div>
      </td>
      <td class='col3'>a</td>
    </tr>
     <tr>
      <td class='col1'>a</td>
      <td class='col2'>
        <div class='line'>
          <div class = 'dot'>
          </div>
        </div>
      </td>
      <td class='col3'>a</td>
    </tr>
    <tr>
      <td class='col1'>a</td>
      <td class='col2'>
        <div class='line'>
          <div class = 'dot'>
          </div>
        </div>
      </td>
      <td class='col3'>a</td>
    </tr>
    <tr>
      <td class='col1'>a</td>
      <td class='col2'>
        <div class='line'>
          <div class = 'dot'>
          </div>
        </div>
      </td>
      <td class='col3'>a</td>
    </tr>

  </tbody>

</table>

CSS

table{
  width: 100%;
}
tr{
  width: 100%;
}
td{
  width: 30%;
  text-align: center;
  position: relative;
}

.dot{
  background-color: maroon;
  width: 10px;
  height: 10px;
   position: absolute;
  transform: translateX(-55%); /*for border*/
  top: 50%;
  border-radius: 100px; 
}

.dot:hover{
  background-color: DarkBlue;
  width: 14px;
  height: 14px; 
  top: 40%;
}

.line{
  height: 110%;
  border-left: solid 2px;
  position: absolute;
  left: 50%;
  top: -25%;
}

.col1{
  text-align: right;
}
.col3{
  text-align: left;
}
.col2{
  width: 5%;
}
weathertopper commented 7 years ago

Oh... I didn't realize I could copy CodePens... so here's ^that code: https://codepen.io/anon/pen/jmExGJ