Browse Source

better timegrid divider styling

Adam Shaw 6 years ago
parent
commit
71021ba22d

+ 1 - 1
packages/bootstrap/src/main.scss

@@ -8,7 +8,7 @@
 }
 
 .fc-bootstrap hr.fc-divider {
-  border-color: inherit;
+  border-color: inherit; // why?
 }
 
 .fc-bootstrap .fc-today.alert {

+ 0 - 7
packages/core/src/styles/_utils.scss

@@ -1,11 +1,4 @@
 
-hr.fc-divider {
-  height: 0;
-  margin: 0;
-  padding: 0 0 2px; /* height is unreliable across browsers, so use padding */
-  border-width: 1px 0;
-}
-
 td.fc-today {
   border-style: double; /* overcome neighboring borders */
 }

+ 6 - 2
packages/timegrid/src/TimeColsView.tsx

@@ -29,7 +29,7 @@ export default abstract class TimeColsView extends View {
   protected allDaySplitter = new AllDaySplitter() // for use by subclasses
 
   private rootElRef = createRef<HTMLDivElement>()
-  private dividerElRef = createRef<HTMLHRElement>()
+  private dividerElRef = createRef<HTMLTableCellElement>()
   private scrollerElRef = createRef<HTMLDivElement>()
   private axisWidth: any // the width of the time axis running down the side
 
@@ -72,7 +72,11 @@ export default abstract class TimeColsView extends View {
         }
       })
       sections.push({
-        outerContent: <hr class={'fc-divider ' + theme.getClass('tableCellHeader')} ref={this.dividerElRef} />
+        outerContent: (
+          <tr>
+            <td class={'fc-divider ' + theme.getClass('tableCellHeader')} ref={this.dividerElRef} colSpan={0} />
+          </tr>
+        )
       })
     }
 

+ 5 - 2
packages/timegrid/src/styles/_time-grid.scss

@@ -1,4 +1,8 @@
 
+.fc-timeGrid-view .fc-divider { // TODO: better selector
+  padding-bottom: 2px;
+}
+
 /* TimeGridView all-day area
 --------------------------------------------------------------------------------------------------*/
 
@@ -54,8 +58,7 @@
   z-index: 1;
 }
 
-.fc-time-grid .fc-slats,
-.fc-time-grid > hr { /* the <hr> TimeGridView injects when grid is shorter than scroller */
+.fc-time-grid .fc-slats {
   position: relative;
   z-index: 2;
 }