Tags: Reverted 2017 source edit |
Tags: Manual revert 2017 source edit |
| Line 74: |
Line 74: |
| </html> | | </html> |
| {{#widget:Videos}} | | {{#widget:Videos}} |
| <html>
| |
|
| |
| <style>
| |
| .video {
| |
| display: flex;
| |
| flex-direction: row; /* Navigation on the right */
| |
| max-width: 100%;
| |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1);
| |
| margin: 20px;
| |
| overflow: hidden; /* Hide overflow */
| |
| }
| |
|
| |
| .video__wrapper {
| |
| flex: 0 0 760px; /* Maximum width of the video */
| |
| position: relative;
| |
| padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
| |
| height: 0;
| |
| }
| |
|
| |
| .video__wrapper iframe {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| width: 100%;
| |
| height: 100%;
| |
| border-radius: 8px;
| |
| }
| |
|
| |
| .video__navigation {
| |
| flex: 0 0 210px; /* Maximum width of the navigation */
| |
| padding: 10px;
| |
| background: #f7f7f7;
| |
| font-family: Arial, sans-serif;
| |
| line-height: 1.5;
| |
| font-size: 14px;
| |
| overflow-y: auto; /* Scrollbar for overflow */
| |
| height: auto; /* Height adjusts to match video */
| |
| max-height: calc(56.25% - 20px); /* Adjust based on video aspect ratio and padding */
| |
| border-left: 1px solid #ccc;
| |
| list-style: none;
| |
| padding-left: 0;
| |
| }
| |
|
| |
| .navigation-item {
| |
| cursor: pointer;
| |
| color: #0066cc;
| |
| padding: 8px;
| |
| border-radius: 4px;
| |
| transition: background-color 0.3s, color 0.3s;
| |
| display: block;
| |
| }
| |
|
| |
| .navigation-item:hover {
| |
| background-color: #e6f0ff;
| |
| color: #004499;
| |
| }
| |
|
| |
| @media (max-width: 768px) {
| |
| .video {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .video__wrapper {
| |
| padding-bottom: 56.25%;
| |
| flex-basis: auto;
| |
| }
| |
|
| |
| .video__navigation {
| |
| flex-basis: auto;
| |
| border-left: none;
| |
| border-top: 1px solid #ccc;
| |
| padding-top: 15px;
| |
| order: 2; /* Navigation moves below the video */
| |
| max-height: none; /* Reset for mobile view */
| |
| }
| |
| }
| |
| </style>
| |
| <div class="video">
| |
| <div class="video__wrapper">
| |
| <iframe id="videoFrame" src="https://www.youtube.com/embed/RxBhb0K6ibo?rel=0&autoplay=0" frameborder="0" allowfullscreen></iframe>
| |
| </div>
| |
| <div class="video__navigation">
| |
| <span data-video="RxBhb0K6ibo" data-start="35" tabindex="0"> <strong> MDriven designer installation</strong> </span>
| |
|
| |
| <strong> Interface Overview :</strong>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="148" tabindex="0"> Setting New Diagram </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="290" tabindex="0"> Add a category </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="396" tabindex="0"> Add a class </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="613" tabindex="0"> Processes </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="767" tabindex="0"> StateMachine diagram</span>
| |
|
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="996" tabindex="0">TagExtensions </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1173" tabindex="0">Attributes</span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1260" tabindex="0"> Association</span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1359" tabindex="0"> FeaturePickForm </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1448" tabindex="0">Setting the color </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1534" tabindex="0">What to show on the diagram? </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1612" tabindex="0"> Delete/Hide from view </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1890" tabindex="0"> Filtering the repository tree</span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="1982" tabindex="0"> Reintroduce/Introduce associations </span>
| |
|
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2073" tabindex="0"> Anchor points and square line option </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2200" tabindex="0"> Additional options: DimDefaults </span>
| |
|
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2321" tabindex="0"> “modlr” file and "ecomdl" file </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2501" tabindex="0"> Association tool </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2697" tabindex="0"> PluralSuffix property </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="2936" tabindex="0"> Generalization/specialization mode</span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3203" tabindex="0"> Reference window </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3300" tabindex="0"> Index model and report errors </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3340" tabindex="0"> Default String Representation </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3486" tabindex="0"> <strong> “Enterprise Architect Information" window : </strong> </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="613" tabindex="0"> Processes </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3498" tabindex="0"> More on processes </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3508" tabindex="0"> Information </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3580" tabindex="0"> Actors </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3684" tabindex="0"> Applications </span>
| |
| <span class="navigation-item" data-video="RxBhb0K6ibo" data-start="3714" tabindex="0"> Infrastructure </span>
| |
| </div>
| |
| </div>
| |
|
| |
| <script>
| |
| document.querySelectorAll('.navigation-item').forEach(item => {
| |
| item.addEventListener('click', function() {
| |
| var videoSrc = 'https://www.youtube.com/embed/' + this.getAttribute('data-video') + '?start=' + this.getAttribute('data-start') + '&autoplay=1';
| |
| document.getElementById('videoFrame').src = videoSrc;
| |
| });
| |
| });
| |
| </script>
| |
| </html>
| |
