Difference between revisions of "Team:Vilnius-Lithuania/test/Collaborations"

m
m
Line 19: Line 19:
 
     </div>
 
     </div>
 
     <main>
 
     <main>
−
         <div class="collabInfo">
+
         <div class="collabAll">
−
             <div class="name" id="collabName">Collab pavadinimas</div>
+
             <div class="collabInfo">
−
            <div class="text" id="collabText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at consectetur lorem donec massa sapien. Sem nulla pharetra diam sit amet nisl. Varius duis at consectetur lorem donec massa. Pretium lectus quam id leo. Dictum at tempor commodo ullamcorper a lacus vestibulum. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam vulputate dignissim suspendisse in est. Libero volutpat sed cras ornare arcu dui vivamus arcu.</div>
+
                <div class="name" id="collabName">Collab pavadinimas</div>
−
            <div class="controls">
+
                <div class="text" id="collabText">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at consectetur lorem donec massa sapien. Sem nulla pharetra diam sit amet nisl. Varius duis at consectetur lorem donec massa. Pretium lectus quam id leo. Dictum at tempor commodo ullamcorper a lacus vestibulum. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam vulputate dignissim suspendisse in est. Libero volutpat sed cras ornare arcu dui vivamus arcu.</div>
−
                <div>
+
                <div class="controls">
−
                    <div class="previous" id="collabPrev"></div>
+
                    <div>
−
                    <div class="select" id="collabList"></div>
+
                        <div class="previous" id="collabPrev"></div>
−
                    <div class="next" id="collabNext"></div>
+
                        <div class="select" id="collabList"></div>
 +
                        <div class="next" id="collabNext"></div>
 +
                    </div>
 
                 </div>
 
                 </div>
 
             </div>
 
             </div>
−
        </div>
+
            <div class="photos" id="collabPhotos">
−
        <div class="collabPhotos" id="collabPhotos">
+
                <span></span>
−
            <span></span>
+
                <span></span>
−
            <span></span>
+
            </div>
 
         </div>
 
         </div>
 
     </main>
 
     </main>
Line 44: Line 46:
 
             {name: "Highschool Mentorystė", photo1: "https://www.usnews.com/dims4/USNEWS/7cfe0a6/2147483647/thumbnail/640x420/quality/85/?url=http%3A%2F%2Fmedia.beam.usnews.com%2F9f%2F4a%2F78c1df634861b133094f7c3a62ec%2F160418-mentor-stock.jpg", photo2: "https://sites.tufts.edu/insight/wp-content/blogs.dir/2889/files/2015/12/Cathedral-High-School-Boston-Mentoring.png", text: "Sem nulla pharetra diam sit amet nisl. Ultricies integer quis auctor elit sed. Quis varius quam quisque id diam vel quam elementum. Suspendisse interdum consectetur libero id faucibus nisl. Lacinia at quis risus sed vulputate odio ut enim. Pulvinar mattis nunc sed blandit. Nisl purus in mollis nunc."},
 
             {name: "Highschool Mentorystė", photo1: "https://www.usnews.com/dims4/USNEWS/7cfe0a6/2147483647/thumbnail/640x420/quality/85/?url=http%3A%2F%2Fmedia.beam.usnews.com%2F9f%2F4a%2F78c1df634861b133094f7c3a62ec%2F160418-mentor-stock.jpg", photo2: "https://sites.tufts.edu/insight/wp-content/blogs.dir/2889/files/2015/12/Cathedral-High-School-Boston-Mentoring.png", text: "Sem nulla pharetra diam sit amet nisl. Ultricies integer quis auctor elit sed. Quis varius quam quisque id diam vel quam elementum. Suspendisse interdum consectetur libero id faucibus nisl. Lacinia at quis risus sed vulputate odio ut enim. Pulvinar mattis nunc sed blandit. Nisl purus in mollis nunc."},
 
             {name: "Mūsų Mielas ir Brangusis Robloxas", photo1: "https://i.ytimg.com/vi/NIY6AG3pAgU/maxresdefault.jpg", photo2: "https://4.bp.blogspot.com/-1kYAohpsDYY/URwD2kiiFhI/AAAAAAAACSo/wEWQu1b51nM/s1600/RobloxScreenShot02122013_201948511.jpg", text: "Sagittis purus sit amet volutpat consequat mauris nunc congue. Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum."},
 
             {name: "Mūsų Mielas ir Brangusis Robloxas", photo1: "https://i.ytimg.com/vi/NIY6AG3pAgU/maxresdefault.jpg", photo2: "https://4.bp.blogspot.com/-1kYAohpsDYY/URwD2kiiFhI/AAAAAAAACSo/wEWQu1b51nM/s1600/RobloxScreenShot02122013_201948511.jpg", text: "Sagittis purus sit amet volutpat consequat mauris nunc congue. Pretium quam vulputate dignissim suspendisse in. Egestas maecenas pharetra convallis posuere morbi. Blandit libero volutpat sed cras ornare. Id venenatis a condimentum vitae sapien. Mattis ullamcorper velit sed ullamcorper morbi. Phasellus faucibus scelerisque eleifend donec pretium. Viverra ipsum nunc aliquet bibendum."},
−
         ];
+
         ]; // TODO: change photos and content
  
 
         // const collabList = document.getElementById("collabList");
 
         // const collabList = document.getElementById("collabList");
Line 85: Line 87:
 
         collabPrev.onclick = () => { setCurrentCollab(currentCollab-1); };
 
         collabPrev.onclick = () => { setCurrentCollab(currentCollab-1); };
 
         collabNext.onclick = () => { setCurrentCollab(currentCollab+1); };
 
         collabNext.onclick = () => { setCurrentCollab(currentCollab+1); };
 +
 +
    </script>
 +
    <script>
 +
        let cEl = (tagName, className, children = []) => {
 +
            let element = document.createElement(tagName);
 +
            element.className = className;
 +
            children.forEach((child)=>element.appendChild(child));
 +
            return element;
 +
        };
 +
        let main = document.querySelector("main");
 +
        for (let collab of collabs){
 +
            let collabName = cEl("div", "name");
 +
            collabName.innerText = collab.name;
 +
            let photo1 = cEl("span", "");
 +
            photo1.style = "background-image: url(" + collab.photo1 + ");";
 +
            let photo2 = cEl("span", "");
 +
            photo2.style = "background-image: url(" + collab.photo2 + ");";
 +
            let collabPhotos = cEl("div", "photos", [photo1, photo2]);
 +
            let collabText = cEl("div", "text")
 +
            collabText.innerText = collab.text;
 +
            let collabDiv = cEl("div", "collabSingle", [collabName, collabPhotos, collabText]);
 +
 +
            main.appendChild(collabDiv);
 +
        }
 
     </script>
 
     </script>
 
      
 
      

Revision as of 15:56, 29 August 2020

Collaborations
Collaborations
Collab pavadinimas
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Duis at consectetur lorem donec massa sapien. Sem nulla pharetra diam sit amet nisl. Varius duis at consectetur lorem donec massa. Pretium lectus quam id leo. Dictum at tempor commodo ullamcorper a lacus vestibulum. Sed odio morbi quis commodo odio aenean sed adipiscing diam. Porta non pulvinar neque laoreet suspendisse interdum consectetur. Quam vulputate dignissim suspendisse in est. Libero volutpat sed cras ornare arcu dui vivamus arcu.