Giter VIP home page Giter VIP logo

dwtimeline's People

Contributors

saggi-dw avatar

Stargazers

avatar avatar

Watchers

avatar avatar

dwtimeline's Issues

A css patch for possible responsive layout bug

Hello,

I've installed the timeline plugin in July last year and it works really fine on my site. But I only find that it does not work very well on media with narrow width (<600px), I checked the css and found there's a section for screen width < 600px but don't know why it does not take effect. I made some modifications on the css and it works now.

The problem happened on my dokuwiki with sidebar enabled, when I tried to visit on narrower page, the milestone content boxed will not be moved to one side, and they also become very very thin so that there's only one character each line.

(by the way I've also change the milestone circle to ellipse because I need a 4-digit year mark. the effect can be seen here)

here is the fix:

.dwtimeline {
    display: flow-root;
}

/* The actual timeline (the vertical ruler) */
.timeline-vert {
    box-sizing: border-box;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* The actual timeline (the vertical ruler) */
.timeline-vert::after {
    content: '';
    position: absolute;
    width: 6px;
    background-color: @ini_text;
    top: 0;
    bottom: 0;
    left: 50%;
    margin-left: -3px;
}

/* Container around content */
.container-vert {
    padding: 10px 40px;
    position: relative;
    background-color: inherit;
    width: 50%;
    box-sizing: border-box;
    margin-left: unset;
    margin-right: unset;
}

/* The circles on the timeline */
.container-vert.tl-left::before, .container-vert.tl-right::before {
    content: attr(data-point);
    display: inline-block;
    position: absolute;
    /*width: 25px;*/
    width: 50px;
    height: 25px;
    /*right: -17px;*/
    right: -29px;
    font-size:1.2em;
    font-weight: unset;
    text-align: center;
    line-height: 1.5em;
    background-color: @ini_background;
    border: 4px solid @ini_link;
    top: 15px;
    border-radius: 50%;
    z-index: 1;
    box-sizing: unset;
    color: @ini_link;
}

/* invert color on timeline point on hover */
.container-vert.tl-left:hover::before, .container-vert.tl-right:hover::before {
    background-color: @ini_link;
    color: @ini_background;
}

/* Place the container to the left */
.container-vert.tl-left {
    left: 0;
}

/* Place the container to the right */
.container-vert.tl-right {
    left: 50%;
}

/* Place the container to center */
.container-vert.tl-top, .container-vert.tl-bottom {
    padding: 0;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    z-index: 1;
    margin-bottom: 10px;
    margin-top: 10px;
    text-align: center;
}

/* Add arrows to the top container (pointing down) */
.container-vert.tl-top::after {
    content: '';
    height: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    width: 0;
    margin-left: -10px;
    z-index: 1;
    border: medium solid @ini_background_neu;
    border-width: 10px 10px 0px 10px;
    border-color: @ini_background_neu transparent transparent transparent;
}

/* Add arrows to the bottom container (pointing up) */
.container-vert.tl-bottom::after {
    content: '';
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    margin-left: -10px;
    z-index: 1;
    border: medium solid @ini_background_neu;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent @ini_background_neu transparent;
}


/* Add arrows to the left container (pointing right) */
.container-vert.tl-left::after {
    content: '';
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    right: 30px;
    border: medium solid @ini_background_neu;
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent @ini_background_neu;
}

/* Add arrows to the right container (pointing left) */
.container-vert.tl-right::after {
    content: '';
    height: 0;
    position: absolute;
    top: 22px;
    width: 0;
    z-index: 1;
    left: 30px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent @ini_background_neu transparent transparent;
}

/* Fix the circle for containers on the right side */
.container-vert.tl-right::before {
    /*left: -16px;*/
    left: -29px;
}

/* The actual content */
.tlcontent {
    padding: 10px 10px;
    background-color: @ini_background_neu;
    position: relative;
    border-radius: 6px;
    color: @ini_text;
    white-space: normal;
    text-align: unset;
}

/* description of milestone, removed <h3> */
.msdesc {
    font-weight: bold;
    font-size: 1.1em;
    padding: 5px;
    text-align: center;
    color: @ini_text;
}

/* Titles of timeline and milestones, removed <h2> */
.mstitle, .tltitle {
    font-weight: bold;
    font-size: 1.4em;
    padding: 5px;
    color: @ini_text;
}

/* fix for space arround paragraph */
.mstitle>p {
    margin-bottom: 0px;
}

/* set the Header to left or */
.container-vert.tl-left .tlcontent .mstitle {
    text-align: right;    
}
/* right */
.container-vert.tl-right .tlcontent .mstitle {
    text-align: left;    
}

/* Horizontal TimeLine */
.timeline-horz {
    box-sizing: border-box;
    white-space: nowrap;
    overflow-x: scroll;
    padding: 30px 0 10px 0;
    position: relative;
    margin: 0 auto;
    box-sizing: border-box;
}

/* The actual timeline (the horizontal ruler) */
.timeline-horz-line {
    height: 4px;
    background: @ini_background_neu;
    width: 100%;
    position: relative;
    top: 16px;
}

/* a smaller bottom container */
.container-horz {
    display: inline-block;
    vertical-align: top;
    padding: 10px 10px 10px 10px;
    position: relative;
    background-color: inherit;
    width: 33%;
    margin-left: -2px;
    margin-right: -2px;
    text-align: center;
    box-sizing: border-box;
}

/* The circles on the timeline at top of container*/
.container-horz::before {
    content: attr(data-point);  
    position: absolute;
    width: 20px;
    height: 20px;
    font-size:1em;
    font-weight: unset;
    text-align: center;
    line-height: 20px;
    background-color: @ini_background;
    border: 3px solid @ini_link;
    color: @ini_link;
    top: -30px;
    left: 50%;
    margin-left: -14px;
    border-radius: 50%;
    z-index: 1;
    box-sizing: unset;
}

/* invert color on timeline point on hover */
.container-horz:hover::before {
    background-color: @ini_link;
    color: @ini_background;
}

/* Add arrows to the container (pointing up) */
.container-horz::after {
    content: '';
    height: 0;
    position: absolute;
    bottom: 100%;
    left: 50%;
    width: 0;
    margin-left: -10px;
    margin-bottom: -10px;
    z-index: 1;
    border: medium solid @ini_background_neu;
    border-width: 0px 10px 10px 10px;
    border-color: transparent transparent @ini_background_neu transparent;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
/* @media screen and (max-width: 600px) {*/
    @media (max-width: 600px) { 
    /* Place the timelime to the left */
    .timeline::after {
        left: 31px;
    }
      
    .timeline-vert {
        left:0;
    }

    /* Full-width containers */
    .container-vert {
        width: 100% !important;
        padding-left: 70px !important;
        padding-right: 10px !important;
    }
      
    /* Make sure that all arrows are pointing leftwards */
    .container-vert::before {
        left: 60px;
        border: medium solid @ini_background_alt;
        border-width: 10px 10px 10px 0;
        border-color: transparent @ini_background_alt transparent transparent;
    }
    
    .timeline-vert::after{
        left:20px; 
    } 
    /* Make sure all circles are at the same spot */
    .tl-left::after, .tl-right::after {
        left: 15px;
    }
      
    /* Make all right containers behave like the left ones */
    .tl-right {
        left: 0%;
    }
    .container-vert.tl-left::before {
        left:-10px;
    }
    
    .container-vert.tl-right {
        left:0;
    }
    
    .container-vert.tl-right::before{
        left:-10px;
    }
    
    .container-vert.tl-right::after{
        left:60px;
    }
    
    .container-vert.tl-left::after {
        left: 60px;
        border: medium solid white;
        border-width: 10px 10px 10px 0;
        border-color: transparent #ddd transparent transparent;
    }
    
    .container-vert .mstitle {
        text-align:center !important;
    }
    
    .container-vert.tl-top{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    
    .container-vert.tl-top::after{
        left:20px;
    }
    .tl-top .tlcontent{
        border-radius: 6px 6px 6px 6px;
    }
    .container-vert.tl-bottom{
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
    .tl-bottom .tlcontent{
        border-radius: 6px 6px 6px 6px;
    }
    .container-vert.tl-bottom::after{
        left:20px;
    }

}

incompatible with sprintdoc template

Hi,

This is a nice plugin. but there is a compatibility problem with the sprintdoc template. As soon as dwtimeline is installed, the content of the left sidebar of the sprintdoc template disappears.

The problem is with your styles. If I remove the file lib/plugins/dwtimeline/style.css, and purge the caches, the sidebar reappears.

I gave a quick look at this file, and I can see that you use very "common" class names such as content, container, left, right. These are used by the template and could be the source of this issue. You probably have to make your selectors more specific some way or another. Also, the first rule * { box-sizing: border-box; } seems a bit invasive.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.