Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'database'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Categories

  • Management
  • Design
  • Requirements
  • Development
  • Test
  • Atlassian

Categories

  • Personal
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-Commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-commerce

Categories

  • Management
  • Design
  • Requirements
  • Development
  • Testing
  • Operations
  • Atlassian
  • Security
  • E-Commerce
  • Others

Categories

  • Thoughts
  • Debate
  • Health
  • Hobbies

Categories

  • Personligt
    • Åsikter
    • Humor
    • Spel
    • Träning
  • Allmänt
    • Internet
    • Program & tjänster
  • Intressant
    • Prylar
  • Professionellt
    • Management
    • Krav
    • Designs
    • Webbutveckling
    • Test
    • Atlassian
    • säkerhet
    • Förvaltning
    • Ehandel
    • Wordpress
  • Personligt_

Categories

  • Prologue
    • About This Book
  • The Tools
    • Jira Software
    • Confluence
    • Jira Service Management
  • The Inception Phase
    • Portfolio Management
    • Project Management
  • The Design Phase
    • Design as part of the Inception phase
    • Design as part of the Requirement phase
    • Working with design libraries
  • The Requirement Phase
    • Definition of Requirements
    • The four levels of Requirements
  • The Development Phase
    • Atomic design
    • Estimations
  • The Test Phase
    • The Definition of Test
    • Types of Test
  • The Operations Phase
    • Release Management
  • The Post Go-Live Phase
    • Incidents
    • Changes
  • Notes
    • My Muses
    • Research

Categories

  • Theme Building
  • Javascript Framework
  • CSS Framework
  • IPS: Pages
    • Database Templates
    • Block Plugin Templates
    • Page Templates
  • Custom Applications
  • Tips & Tricks

Categories

  • Europe
    • Central Europe
    • Eastern Europe
    • Northern Europe
    • Southeastern Europe
    • Southern Europe
    • Western Europe
  • North America
    • United States of America
    • Canada
    • Mexico
    • Caribbean
    • Central America
  • South America
    • Argentina
    • Bolivia
    • Brazil
    • Chile
    • Colombia
    • Ecuador
    • Falkland Islands
    • Guyana
    • Paraguay
    • Peru
    • Suriname
    • Uruguay
    • Venezuela
  • Africa
    • Northern Africa
    • Central Africa
    • Western Africa
    • Eastern Africa
    • Southern Africa
  • Asia
    • Central Asia
    • East Asia
    • South-Eastern Asia
    • Southern Asia
    • Western Asia
  • Oceania
    • Australia
    • Fiji
    • Kiribati
    • Marshall Islands
    • Micronesia
    • Nauru
    • New Zealand
    • Palau
    • Papua New Guinea
    • Samoa
    • Solomon Islands
    • Tonga
    • Tuvalu
    • Vanuatu

Categories

  • Shared Hosting
  • Virtual Private Server
  • Cloud Hosting
  • Dedicated Hosting
  • Co-Location
  • Hosting Services

Categories

  • Professional
    • Management
    • Design
    • Requirements
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Categories

  • Defects
  • Ideas
  • Development
  • ☑ Archive

Categories

  • Professional
  • Management
    • Agile
  • Requirements
  • Design
  • Development
    • Frontend
    • Backend
  • Testing
  • Operations
    • Hosting
  • Atlassian
  • Security
  • E-commerce
    • CRO
    • SEO
  • Interesting

Categories

  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce

Forums

  • General
    • Open Forum
    • Support
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Test / QA
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
    • Invision Community
  • Jobs
    • Looking for employee / consultant
    • Looking for Job / Assignment
  • Building The Site's Forums
  • Destiny 2's Discussions
  • The Journey's Discussions
  • Cinephilia's Topics
  • Diablo 4's Diablo 4 Topics
  • Shadownessence's Topics
  • sensory hyperreactivity's Topics
  • Wolcen's Wolcen Topics
  • Quality Assurance Heroes's QA Topics
  • Visual Studio Code's Forum
  • Adobe Illustrator's Adobe Illustrator Forum
  • Sketch Guru's's Sketch Topics
  • Requirements & test management in Jira's Topics
  • Microsoft Teams's Microsoft Teams Discussions
  • Figma's Figma Topics
  • Microsoft Planner's Microsoft Planner Topics
  • Psychology's Psychology Topics
  • Microsoft Word's Microsoft Word Topics
  • Microsoft Powerpoint's Microsoft Powerpoint Topics
  • WordPress Devs's Wordpress Topics
  • Ornamental Design's Ornamental Design Topics
  • Adobe Photoshop's Photoshop Discussions
  • Agile 2's Agile 2 Topics
  • Agile 2's Agile 2 Principles
  • Microsoft Outlook's Outlook Topics
  • My Book's Discussions
  • Outriders's Outriders Discussions

Categories

  • Jimi's Files
    • Curriculum vitae
    • Presentations
    • Certificates
  • Management
  • Requirements
  • Design
    • Fonts
  • Code
  • Test
  • Operations
  • Atlassian
    • Certificates of Excellence
  • Security
  • Ecommerce
  • Invision Power Services
    • JWSE Support Tickets
    • JWSE Task Management
  • Shadownessence's Files
  • WordPress Devs's Wordpress Files

Calendars

  • Project: JWSE Workboard
  • Project: JWSE Workboard
  • Community Calendar
  • Professional Events
  • Management Events
  • Requirement Events
  • Design Events
  • Development Events
  • Test Events
  • Atlassian Events
  • Operations Events
  • E-commerce Events
  • Destiny 2's Events
  • The Journey's Events
  • Cinephilia's premieres
  • Diablo 4's Diablo 4 Events
  • Agile 2's Agile 2 Events

Blogs

  • How to start your own blog
  • Sketch Blog
  • Building The Site's Blog
  • Destiny 2's Destiny 2 ramblings
  • The Journey's Stories
  • Diablo 4's Diablo 4 blog
  • Sketch Guru's's Sketch News
  • Requirements & test management in Jira's News
  • Agile 2's Agile 2 Blog

Categories

  • Personal
    • Humor
    • Music
  • Professional
    • Management
    • Requirements
    • Design
    • Development
    • Testing
    • Operations
  • Interesting
    • Atlassian
    • Security
    • E-commerce
  • Destiny 2's Videos
  • The Journey's Videos
  • Cinephilia's Trailers
  • Diablo 4's Diablo 4 Videos
  • Wolcen's Wolcen Videos
  • Visual Studio Code's Videos
  • Adobe Illustrator's Adobe Illustrator Videos
  • Sketch Guru's's Sketch Videos
  • Requirements & test management in Jira's Videos
  • Microsoft Teams's Microsoft Teams Videos
  • Figma's Figma Videos
  • Microsoft Planner's Microsoft Planner Videos
  • Psychology's Psychology Videos
  • Microsoft Word's Microsoft Word Videos
  • Microsoft Powerpoint's Microsoft Powerpoint Videos
  • WordPress Devs's Wordpress Videos
  • Ornamental Design's Ornamental Design Videos
  • Adobe Photoshop's Photoshop Videos
  • Agile 2's Agile 2 Videos
  • Microsoft Outlook's Outlook Videos
  • Outriders's Outriders Videos

Categories

  • Movies
    • Action Movies
    • Adventure Movies
    • Animated Movies
    • Comedy Movies
    • Crime Movies
    • Drama Movies
    • Fantasy Movies
    • Horror Movies
    • Romance Movies
    • Sci-Fi Movies
    • Thriller Movies
    • Western Movies
  • TV Shows
    • Action TV Shows
    • Adventure TV Shows
    • Animated TV Shows
    • Comedy TV Shows
    • Crime TV Shows
    • Drama TV Shows
    • Fantasy TV Shows
    • Horror TV Shows
    • Romance TV Shows
    • Sci-Fi TV Shows
    • Thriller TV Shows
    • Western TV Shows

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


About Me

Found 9 results

  1. Last night I could not sleep, so I played around a bit with this idea I have had for a while to have a section for quick links to interesting blog posts or news. I realized that not only would this be fairly easy to build, but the functionality to promote, or like, things was already built and I had the code for it installed! I just need to adjust the code a bit and give it some design love and it should be good to go. Anyone who remember the old Digg site probably remember the many great things you could find there in the early days. While I have no ambition to reach anywhere near the same popularity, I hope that some people might find it useful at least. With so much content, it is hard to keep up with all the great things, so this can at the very least be a nice way for me to drop in great articles that I find. The idea behind this setup is fairly simple. Provide a simple way to add links to specific articles or news, so content creators can get some links back to their websites. Use a simple boost button to let people vote up good content and a bury button to vote things down. Allow for the users to see things based on last added content, curated content or based on ratings. In short, it will be a news aggregator like the good old Digg and it's many copycats. While it will not have as many bells and whistles, I will add a few things that I have not seen before. The perhaps most interesting thing will be the connection to other databases. This will allow me to not just share links in the Stories section, but also to cross post to for example products, companies and later on people and certain add-ons like the Atlassian add-ons. For now, I am just playing around in Figma to see what kind of designs I can come up with. All the heavy lifting has already been done by Ralf Herrmann, an amazing IPS creator that provide some of the best plugins for Pages. His plugin SuperVote have all the features I need to build this, even if I will hack it quite a bit. For now, I have an idea in my mind where I will keep the same style as for other parts of the website, which means that I will color each story based on category. I am also playing around a bit with RSS imports for certain sites that I want to keep tabs on. These will be added as hidden and then manually edited for now. Later on, I plan to have them be fully automatic, but I want to control them a bit first. Images, for example, will only be added if uploaded by the owner of the links, or if I have their permission. I will start small and then see what happens.
  2. While working on the components for the new About Me section, I realized that I needed a proper way for people to communicate with me. After considering the options for a while, I decided to build my own ticket system. This is fairly easy and I could have done things in several ways, but decided to use some tricks from my Task Manager to make it a little more dynamic. In essence, this is just a database where I have defined the setup so that you only see your own entries. As the owner, I of course see all entries, which makes it easy to work with. I have added a few fields to help sort things using filters. These fields include Status of course, type of request as this setup does not include any categories, Priority for escalation and SLA, which is just a date field I can set for due date that is then calculated to show time to completion. I also have a field for Assignee, even though it is a bit of an overkill for my purposes. I have added it thought for others to use that have more than one person managing the tickets. Database fields and Templates While working on this new set of templates, I realized that I probably should add some variables for dealing with the field numbers. In most cases you use template names, so it's fairly easy to manage, but in the case of adding the ability to update fields in the frontend we use field ID's instead. Since everyone has a different ID sequence, this can be a bit annoying to work with, so I am thinking I will add variables instead at the beginning of the templates. This way they will work just like CSS, so you can change one variable and it will update across the template. Easy creation This setup is nothing fancy and it is just a first iteration. I will probably build more on it as I see the need for it, but for now it will suit my need. All in all, it took about a week to complete, but that was mostly because I did not have much time to commit to it. I will still do a new form for this one, but other than that I think this one is done. It is nice because I only needed to customize two templates and the form, instead of all five templates. Tasks integrations I have a field for database relations that I will add later. Not that I think I will actually need it, but more because I want to write a guide on how to do it and also so I can use it if I want. I also want to make sure that if someone else wants to use both together, they have a way to do it out of the box. Onwards with About Me With this, I now only have to figure out how I want to set up the History part about me. I have some ideas for it that include setting up a database where each category will become a full width component, or just use blocks for it. I'll ponder on it some more in the coming weeks to see where I might land on that. Always moving forward
  3. Notion.so is a relatively new product, but it is already making some waves and is often mentioned in comparison with Atlassians products. At first glance it has a good spread of functionality and a price that can really challenge the Atlassian giant, especially for small to medium companies. "Write, plan, collaborate, and get organized. Notion is all you need — in one tool." Notion.so started in 2016 in San Fransisco and it has already attracted many users to its simple, yet powerful features. On their website they have 4 areas that they see as their core: Notes & docs, Knowledge base, Tasks & Projects and Database. If we compare these with the Atlassian suite it is pretty much Confluence with Trello baked into one product. The editing capabilities are not bad and Notion.so uses an inline editing function rather then the old click to edit function in Confluence. It is very nice and uses the "/" command to access the functions rather than a toolbar. The permissions system is a bit different, but seem pretty solid from what I can tell. Once you get the hang of things it is very, very easy to build content with Notion.so. The capabilities for Tasks & Projects are very similar to Trello so if you know how to work with Trello you should have no issues with Notion.so. If anything I feel that Notion.so actually have a more capable feature set than Trello by allowing a ton of fields that can be customized to create some pretty sophisticated setups. While not nearly as powerful as Jira for development purposes, this is is more than enough for many other situations. Databases follow pretty much the same capabilities as for tasks and pages. In fact tasks comes from a database by default. This means that you can create pretty awesome databases with multiple views, including tasks, lists and even a calendar view. Personally I love the feature that each row in my table can be edited as a separate page. At a very affordable price compared to Confluence and Jira with pretty solid features this is not a bad alternative. There are some concerns regarding security as Notion.so do not have any ISO, SOC 2, HIPAA certificates, but considering they have passed reviews from companies such as Slack and Intercom that is probably not a big thing for it's user base. I see Notion.so as a good alternative for small to medium non-development companies. It can work for smaller development companies as well as for large non-development companies, but I think the sweet spot is in the small to medium non-development area. The price also suggest that as it is user based and at the top tier with 20 dollars per user it is getting pretty expensive. I like Notion.so and I think it definitely have a place in some organizations. It is clearly being developed with passion where the goal is not to make money, but to make people's life easier and more organized. As always they get an extra gold star for giving students and educators this awesome product for free. Notion.so comes as an online cloud solution, a mobile app as well as downloads for mac and windows that even allow offline editing....and did I mention it has a dark mode that is simply amazing? If you have not tried it, then go and sign up for a free account today and give it a go.
  4. This week I took a look at a plugin I had and decided to style it a bit to fit the image I had in my mind. As it turned out this was very easy and the only thing that stopped me for a while was how to use custom fields. Once that was done it was smooth sailing and quite fun to customize. This is how I did it, so you can do it yourself if you want. The app that we will be working with is the Movies & TV Shows by Adriano Faria. This is an amazing app that use the TMDB database to fetch data for the movies and TV shows, making adding movies and TV shows fast and fun. Adriano has several similar apps and I also have the Books version that I probably look at later as well. In order to modify the app we need to go to the themes (customization -> Apperance -> Themes) and click the Edit HTML & CSS button. This takes us to the templates for our theme. There you will have two tabs, one for templates and one for CSS. In both of those tabs we will have a section called "Movies". This is where we find the app templates and the CSS that the app use. Inside the templates we will focus on a few templates to make the design that we want to make. View -> View: This is the template that control the layout for when you look at a movie or tv show. Index -> indexBlock: This is the template that control the latest and random items block on the start page. Index -> featuredMovie: This is the template that control the featured movies block on the start page. front -> browse -> rows: This is the template that control the listing inside a category. We will also work with the CSS that is located in the CSS tab: movies -> front -> movies.css Changing the view The first thing I did was to change the View template. I had the idea that I wanted to have a big background image behind the content. This is a bit tricky since the content is trapped inside a div that have a fixed width. The second thing I wanted was to add more data and I especially wanted to add a custom rating icon for my rating since I will use this as my recommendation site of sorts. So first I needed to figure out how to add custom fields and decide what fields I wanted. I decided on the following fields: Official Trailer (ID:8) - The ID of the trailer, so I can add it to an embedded video player Certification (ID:6) - Just a text field to add the certification. TV Year (ID:4) - Just a text field here as well. My Review (ID:2) - An editor field, so I can write my review. My Rating (ID:5) - Just a number field, so I can add values between 1 and 100. Backdrop (ID:1) - An upload field, so I can add a big image behind the content. In order to show these fields I need to use this little piece of code: {{$fields = $movie->customFields();}}{$fields['field_1']} I then just change the field_1 to the field I want to display. You can see what the id of your field is by hovering over the edit button in the custom fields view. I also want to be able to add some conditions, so I only see things if the field is filled in and in order to do that I use this: {{if $movie->customFields('field_1')}} With that we can now add our custom fields to the template and start looking at how to style them. The Backdrop The backdrop is shown by displaying the file that we uploaded, but it will be constrained within the content and we want to break it out from that. This is where we use a little hack in CSS and I added a class to the div surrounding the backdrop and then added this CSS to it: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top:-15px; min-height:800px; background-image:url(https:{media="528"}); background-color: #294459; background-position:top center; background-repeat:no-repeat; background-size:cover; } This now show the image in full width and I have this idea that I want to add a play button to the backdrop that show a trailer when I click it. There are several ways to do this, but I decided to use the built-in function in Invision Community called ips.ui.dialog. This nifty function allow me to open a modal and either populate it with a link or content inside the same page. As it does not work to refer directly to the url of the trailer, we use the embed code instead and place the content in a hidden div in the document. {{if $movie->customFields('field_1')}} <div class="full-width" style="background-image:url('https://jimiwikman.se/uploads/{{$fields = $movie->customFields();}}{$fields['field_1']}');"> <!-- Official Trailer --> {{if $fields['field_8']}} <a href='#dialogContent' data-ipsDialog data-ipsDialog-size="fullscreen" data-ipsDialog-content='#dialogContent'> <div class="JWSE_play"> <span class="JWSE_playBtn"><i class="far fa-play-circle"></i></span> <span class="JWSE_playTxt">Play Trailer</span> </div> </a> <div id="dialogContent" class="JWSE_video-container ipsHide"> <iframe src="https://www.youtube.com/embed/{$fields['field_8']}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> {{endif}} In the code I refer to the custom field I created for the official trailer that hold the movie ID. I also wrap the code in an if query, so it only shows if a value is entered. I use FontAwesome to show the play icon and I define the modal to be full view using the data-ipsDialog-size attribute. Currently, narrow, medium, wide and full screen are supported as values for this option. I then style this with the following CSS: /*** Youtube Popup ***/ .JWSE_video-container { overflow: hidden; position: relative; width:100%; } .JWSE_video-container::after { padding-top: 56.25%; display: block; content: ''; } .JWSE_video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .JWSE_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align:center; height:170px; width:170px; background: rgb(41,68,89, 0.5); display:block; border-radius:100% } .JWSE_playBtn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:70px; opacity:0.9; color:white; display:block; } .JWSE_playTxt{ position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); font-size:16px; color:white; display:block; } My Rating Adding a rating icon to make the rating number look cool is next, and I wanted a circle with numbers inside. This can be done in any number of ways, but I decided on a fairly simple version of a SVG circle using css keyframes for animation. <!-- JWSE Rating Circle --> {{if $fields['field_5']}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} As you can see in the code I have two versions of the circle, one for when I have added a value and one for when I have not. I had to add a condition to the second version because as I have a number field it will always be 0, which means that it is never empty. This means that the first condition will always be true, even if I have not added anything to the field. To this I added the following CSS: /*** My Rating Circle ***/ .jwse_MyReviewText{ position:relative; } .jwse_ratingCircle { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:100px; } .jwse_ratingCircle-indexBlock { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:50px; } .jwse_ratingCircle-categoryList { float: left; position: absolute; top: -5px; left: 112px; z-index:999; width:50px; } .circular-chart{ display: block; margin: 10px auto; max-width: 80%; max-height: 100px; background-color: var(--color-baseblue); border-radius: 50%; } .circular-chart-indexBlock{ max-width:100%; max-height:50px; top:-6px; right: 3px; position:relative; } .circular-chart-Featured{ max-height:50px; top:-5px; right: 17px; position:relative; } .circular-chart_unrated{ background-color: var(--color-palegrey); } .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; opacity: 0.3; } .circle { fill: none; stroke-width: 3.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-chart.orange .circle { stroke: var(--color-jwsecoral); } .percentage { fill: white; font-family: Montserrat; font-size: 13px; text-anchor: middle; } .percentageSmall{ fill: white; font-family: Montserrat; font-size: 5px; text-anchor: middle; } .unrated{ font-size:5px; } As you can see I have variants for the indexBlock and featuredBlock as well as adustment for the category list. This because the images are different for those areas and we need to adjust a bit. Let's put it all together With this I now have all the custom fields shown on the page, a backdrop that cover the full width of the page and I have a visual representation of the rating. All that is left is to put things together in the templates and add styles to it. We also need to adjust a bit for mobile view. With permission from Adriano, I will show you the code I use, and you can copy and paste it into your own movies theme files to get the layout I use here on this site. I have not cleaned these up, so there are some areas that need cleaning, but it works. View Rows indexBlock featuredMovie CSS <div class="ipsRichEmbed" style="max-width: 500px; border: 1px solid rgba(0,0,0,0.1); "> <div class="ipsRichEmbed_masthead ipsRichEmbed_mastheadBg ipsType_center"> <a href="https://www.vowel.com/" rel="external nofollow" style="background-image: url( 'https://s3.amazonaws.com/com.vowel.resources/social/vowel-share-thumb.jpg' ); background-position: center; background-repeat: no-repeat; background-size: cover; height: 120px; display: block;"><img alt="vowel-share-thumb.jpg" class="ipsHide" data-loaded="true" data-src="https://s3.amazonaws.com/com.vowel.resources/social/vowel-share-thumb.jpg" src="https://jimiwikman.se/applications/core/interface/js/spacer.png" style="height: auto;"></a> </div> <div style="padding: 10px;"> <h3 class="ipsRichEmbed_itemTitle ipsTruncate ipsTruncate_line ipsType_blendLinks"> <a href="https://www.vowel.com/" rel="external nofollow" style="text-decoration: none; margin-bottom: 5px;" title="Home - Vowel">Home - Vowel</a> </h3> <div class="ipsType_light"> WWW.VOWEL.COM </div> <hr class="ipsHr"> <div class="ipsSpacer_top ipsSpacer_half" data-ipstruncate="" data-ipstruncate-size="3 lines" data-ipstruncate-type="remove" style="overflow-wrap: break-word;"> <span>Vowel is a tool that captures your team&rsquo;s meetings. Use it to annotate meetings in real-time, tag action items, call back ideas verbatim&mdash;and a whole lot more.</span> </div> </div> </div> <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" data-ipstabbar="" data-ipstabbar-contentarea="#" data-ipstabbar-defaulttab="1" data-ipstabbar-updateurl="false" id="elTabBar"> <ul role="tablist"> <li> <a aria-selected="true" class="ipsType_center ipsTabs_item ipsTabs_activeItem" href="" id="1" rel="" role="tab"> View </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="2" rel="" role="tab"> Rows </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="3" rel="" role="tab"> indexBlock </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="4" rel="" role="tab"> featuredMovie </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="5" rel="" role="tab"> CSS </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_1_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> {{if $club = $movie->container()->club()}} {{if settings.clubs and settings.clubs_header == 'full'}} {template="header" app="core" group="clubs" params="$club, $movie->container()"} {{endif}} <div id='elClubContainer'> {{endif}} {{$fields = $movie->customFields();}} {{if $fields['field_1']}} <div class="full-width" style="background-image:url('https://jimiwikman.se/uploads/{$fields['field_1']|raw}');"> <!-- Official Trailer --> {{if $fields['field_8']}} <a href='#dialogContent' data-ipsDialog data-ipsDialog-size="fullscreen" data-ipsDialog-content='#dialogContent'> <div class="JWSE_play"> <span class="JWSE_playBtn"><i class="far fa-play-circle"></i></span> <span class="JWSE_playTxt">Play Trailer</span> </div> </a> <div id="dialogContent" class="JWSE_video-container ipsHide"> <iframe src="https://www.youtube.com/embed/{$fields['field_8']}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> {{endif}} </div> {{else}} <div class="full-width" style="background-image:url('{media="528"}')"></div> {{endif}} <div class=""> <div class="ipsPageHeader ipsClearfix ipsSpacer_bottom"> {template="contentItemMessages" group="global" app="core" params="$movie->getMessages(), $movie"} <div class='ipsBox ipsResponsive_pull'> <div class='ipsColumns ipsColumns_collapsePhone'> <aside class='ipsColumn ipsColumn_veryWide ipsPadding_right:none'> <div class='ipsPad lg:ipsPos_sticky'> <div> {{if $movie->cover_thumb}} <div class='ipsPos_center'> <div class="sosMovieCover"> <!-- JWSE Rating Circle --> {{if $fields['field_5']}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, '', $movie->title, 'large'"} </div> <div class="jwse_MoviePhoto_Footer"> {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$movie->reviews"})</span> </div> </div> {{else}} <center><img src='{resource="movie.PNG" app="movies" location="front"}'></center> {{endif}} <hr class='ipsHr'> {{if $movie->imdb_id OR $movie->homepage OR $movie->wikipedia OR $movie->instagram OR $movie->facebook OR $movie->twitter OR $movie->justwatch}} <ul class='ipsList_inline ipsSpacer_both ipsType_center'> {{if $movie->homepage}} <li><a title="{lang="movies_homepage_visit"}" data-ipsTooltip target="_blank" href="{$movie->homepage}"> <i class="fa fa-link fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->imdb_id}} <li><a title="{lang="movies_imdb_page_visit"}" data-ipsTooltip target="_blank" href="https://www.imdb.com/title/{$movie->imdb_id}/"> <i class="fa fa-imdb fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->facebook}} <li><a title="{lang="movies_facebook_page"}" data-ipsTooltip target="_blank" href="{$movie->facebook}"> <i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->instagram}} <li><a title="{lang="movies_instagram_page"}" data-ipsTooltip target="_blank" href="{$movie->instagram}"> <i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->justwatch}} <li><a title="{lang="movies_justwatch_page"}" data-ipsTooltip target="_blank" href="{$movie->justwatch}"> <i class="fa fa-play fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->twitter}} <li><a title="{lang="movies_twitter_page"}" data-ipsTooltip target="_blank" href="{$movie->twitter}"> <i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->wikipedia}} <li><a title="{lang="movies_wikipedia_page"}" data-ipsTooltip target="_blank" href="{$movie->wikipedia}"> <i class="fa fa-wikipedia-w fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->canEdit()}} <li> <a href="{$movie->url()->csrf()->setQueryString( array( 'do' => 'editUrls' ) )}" data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="movie_edit_urls"}"> <i data-ipsTooltip title="{lang='movie_edit_urls'}" class="fa fa-pencil fa-fw" aria-hidden="true"></i> </a> </li> {{endif}} </ul> <hr class='ipsHr'> {{endif}} <ul class="ipsDataList ipsDataList_reducedSpacing ipsSpacer_top"> <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_type"}</strong></span> <span class="ipsDataItem_generic">{lang="movie_type_{$movie->type}"}</span> </li> <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_status"}</strong></span> <span class="ipsDataItem_generic">{$movie->status}</span> </li> {{if $movie->type=='tv'}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_seasons"}</strong></span> <span class="ipsDataItem_generic">{$movie->seasons}</span> </li> <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_episodes"}</strong></span> <span class="ipsDataItem_generic">{$movie->episodes}</span> </li> {{endif}} {{if $movie->type=='movie'}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_original_language"}</strong></span> {{$language = \IPS\movies\Movie::getLanguageName( $movie->original_language );}} <span class="ipsDataItem_generic">{$language}</span> </li> {{if $movie->budget}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_budget"}</strong></span> <span class="ipsDataItem_generic">{expression="\IPS\Member::loggedIn()->language()->formatNumber( $movie->budget, 2 )"}</span> </li> {{endif}} {{if $movie->revenue}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_revenue"}</strong></span> <span class="ipsDataItem_generic">{expression="\IPS\Member::loggedIn()->language()->formatNumber( $movie->revenue, 2 )"}</span> </li> {{endif}} {{endif}} </ul> {{if $movie->topic()}} <hr class='ipsHr'> <a href='{$movie->topic()->url()}' title='{lang="movie_discussion_topic"}' class='ipsButton ipsButton_primary ipsButton_fullWidth'>{lang="movie_discussion_topic"}</a> {{endif}} <div class='ipsResponsive_showPhone ipsResponsive_block ipsSpacer_top'> {template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"} </div> </div> </div> </aside> <article class='ipsColumn ipsColumn_fluid ipsPadding_left:none'> <div class='ipsPad'> <section class='ipsType_normal whiteBack'> <div class='ipsPageHeader ipsResponsive_pull ipsBox ipsPadding ipsSpacer_bottom'> <div class='ipsFlex ipsFlex-ai:center ipsFlex-fw:wrap ipsGap:4'> <div class='ipsFlex-flex:11'> <h1 class='ipsType_pageTitle ipsContained_container'> {{if $movie->mapped('locked')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="movies_locked"}'><i class='fa fa-lock'></i></span></span> {{endif}} {{if $movie->hidden() === 1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span> {{elseif $movie->hidden() === -1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span> {{elseif $movie->hidden() === -2}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->deletedBlurb()}'><i class='fa fa-trash'></i></span></span> {{endif}} {{if $movie->canToggleItemModeration() and $movie->itemModerationEnabled()}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="topic_moderation_enabled"}'><i class='fa fa-user-times'></i></span></span> {{endif}} {{if $movie->mapped('pinned')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span> {{endif}} {{if $movie->mapped('featured')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span> {{endif}} {{if $movie->canEdit()}} <span class='ipsType_break ipsContained' data-controller="core.front.core.moderation"> {{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<span data-role="editableTitle" title='{lang="click_hold_edit"}'>{$movie->title}</span> </span> {{else}} <span class='ipsType_break ipsContained'>{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}{$movie->title}</span> {{endif}} {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="jwse_movieYear">( {$date->format('Y')} )</span> {{endif}} {{if $fields['field_4']}} <span class="jwse_movieYear">( {{$fields = $movie->customFields();}}{$fields['field_4']} )</span> {{endif}} {{if $movie->prefix() OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}} <span {{if !$movie->prefix()}}class='ipsHide'{{endif}} {{if ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}data-editablePrefix{{endif}}> {template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"} </span> {{endif}} </h1> <div class="jswe_movieMeta"> {{if $fields['field_6']}} <span class="ipsDataItem_generic certification">{{$fields = $movie->customFields();}}{$fields['field_6']|raw}</span> {{endif}} <!-- Movie Release Date --> {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="ipsDataItem_generic">{datetime="$date" dateonly="true"}</span> {{endif}} <!-- Movie Genres --> {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <span class="ipsDataItem_generic">{$genres}</span> <!-- Movie Runtime --> {{if $movie->runtime}} {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <span class="ipsDataItem_generic">{$runtime}</span> {{endif}} </div> {{if $movie->subtitle}} <span class="jwse_movieSubtitle">{$movie->subtitle}</span> {{endif}} <span class="jwse_movieDescription">{lang="meta_description"}</span> <p> {$movie->description|raw} </p> {{if \count( $movie->tags() ) OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) )}} {template="tags" group="global" app="core" params="$movie->tags(), FALSE, FALSE, ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) ) ? $movie->url() : NULL"} {{endif}} </div> </div> <hr class='ipsHr'> <div class='ipsPageHeader__meta ipsFlex ipsFlex-jc:between ipsFlex-ai:center ipsFlex-fw:wrap ipsGap:3'> <div class='ipsFlex-flex:11'></div> <div class='ipsFlex-flex:01 ipsResponsive_hidePhone'> <div class='ipsFlex ipsFlex-ai:center ipsFlex-jc:center ipsGap:3 ipsGap_row:0'> {{if \count( $movie->shareLinks() )}} {template="shareButton" app="core" group="sharelinks" params="$movie"} {{endif}} {template="promote" app="core" group="global" params="$movie"} {template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"} </div> </div> </div> </div> {{if $movie->hidden() === 1 and $movie->canUnhide()}} <div class="ipsMessage ipsMessage_warning ipsSpacer_both"> <p class="ipsType_reset">{lang="movie_pending_approval"}</p> <br> <ul class='ipsList_inline'> <li><a href="{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unhide' ) )}" class="ipsButton ipsButton_positive ipsButton_verySmall" title='{lang="approve_title_link"}'><i class="fa fa-check"></i> {lang="approve"}</a></li> {{if $movie->canDelete()}} <li><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete' ) )}' data-confirm title='{lang="movies_delete_title"}' class='ipsButton ipsButton_negative ipsButton_verySmall'><i class='fa fa-times'></i> {lang="delete"}</a></li> {{endif}} </ul> </div> {{endif}} <div class='ipsTabs ipsClearfix' id='elTabBar' data-ipsTabBar data-ipsTabBar-contentArea='#elTabContent' data-ipsTabBar-updateURL='false'> <a href='#elTabBar' data-action='expandTabs'><i class='fa fa-caret-down'></i></a> <ul role='tablist'> <li role='presentation'> <a href='{$movie->url()}' role='tab' id='elTabMovie' class='ipsTabs_item' aria-selected="true"> My Thoughts </a> </li> {{if \IPS\Settings::i()->movies_cast}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'cast' ) )}' id='elTabCast' role='tab' class='ipsTabs_item'> {lang="movies_tab_cast"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_crew}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'crew' ) )}' id='elTabCrew' role='tab' class='ipsTabs_item'> {lang="movies_tab_crew"} </a> </li> {{endif}} {{if $movie->type == 'tv'}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'seasons' ) )}' id='elTabEpisodes' role='tab' class='ipsTabs_item'> {lang="movies_tab_seasons"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_videos}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'videos' ) )}' id='elTabVideos' role='tab' class='ipsTabs_item'> {lang="movies_tab_videos"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_posters}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'posters' ) )}' id='elTabPosters' role='tab' class='ipsTabs_item'> {lang="movies_tab_posters"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_images}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'images' ) )}' id='elTabImages' role='tab' class='ipsTabs_item'> {lang="movies_tab_images"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_similar}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'similar' ) )}' id='elTabSimilar' role='tab' class='ipsTabs_item'> {{if $movie->type == 'movie'}} {lang="movies_tab_similar"} {{else}} {lang="movies_tab_similar_tv"} {{endif}} </a> </li> {{endif}} </ul> </div> <section id='elTabContent'> <div class="ipsBox ipsPad"> <div itemprop='text' data-controller='core.front.core.lightboxedImages'> <div class="jwse_MyReviewFace"></div> <div class="jwse_MyReviewText"> <span class="jwse_MyReviewTextRating"> <!-- JWSE Rating Circle --> {{if $fields['field_5']}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{else}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} </span> {{if $fields['field_2']}} {{$fields = $movie->customFields();}}{$fields['field_2']|raw} {{else}} <p> <i>I have not written a review for this {{if $movie->type == 'movie'}}Movie{{else}}TV Show{{endif}} yet.<br /> Write a comment and remind me to write one!</i> </p> {{endif}} </div> <br style="clear:both;" /> </div> {{if $movie->container()->auto_content AND \IPS\Member::loggedIn()->language()->checkKeyExists( "movies_category_{$movie->container()->id}_append_content" )}} {{$lang = \IPS\Member::loggedIn()->language()->addToStack( "movies_category_{$movie->container()->id}_append_content" );}} {{\IPS\Member::loggedIn()->language()->parseOutputForDisplay( $lang );}} {{$content = str_replace( "%MOVIENAME%", $movie->title, $lang );}} {{\IPS\Member::loggedIn()->language()->parseOutputForDisplay( $content );}} {$content|raw} {{endif}} </div> </section> </section> </div> </article> </div> {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') ) or $movie->canReportOrRevoke() or ( \IPS\IPS::classUsesTrait( $movie, 'IPS\Content\Reactable' ) and settings.reputation_enabled )}} <div class='ipsItemControls'> {{if \IPS\IPS::classUsesTrait( $movie, 'IPS\Content\Reactable' ) and settings.reputation_enabled}} {template="reputation" app="core" group="global" params="$movie"} {{endif}} {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') ) or $movie->canReportOrRevoke()}} <ul class='ipsComment_controls ipsClearfix ipsItemControls_left'> {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') )}} <li> <a href='#elMovieActions_menu' id='elMovieActions' class='ipsButton ipsButton_light ipsButton_verySmall ipsButton_fullWidth' data-ipsMenu>{lang="{$movie->type}_actions"} <i class='fa fa-caret-down'></i></a> <ul id='elMovieActions_menu' class='ipsMenu ipsMenu_auto ipsHide'> {{if $movie->canReportOrRevoke() === TRUE}} <li class='ipsMenu_item'> <a href='{$movie->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="report_movie"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="report_movie"}" >{lang="report"}</a> </li> <li class='ipsMenu_sep'><hr></li> {{endif}} {{if \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') AND $movie->hidden() == -2}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'restore' ) )}' data-confirm data-confirmSubMessage='{lang="restore_as_visible_desc"}'>{lang="restore_as_visible"}</a></li> <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'restoreAsHidden' ) )}' data-confirm data-confirmSubMessage='{lang="restore_as_hidden_desc"}'>{lang="restore_as_hidden"}</a></li> <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete', 'immediate' => 1 ) )}' data-confirm data-confirmSubMessage='{lang="delete_immediately_desc"}'>{lang="delete_immediately"}</a></li> {{else}} {{if $movie->canEdit()}} <li class='ipsMenu_item'><a href='{$movie->url()->setQueryString( array( 'do' => 'edit' ) )}' title='{lang="edit"}'>{lang="edit"}</a></li> {{endif}} {{if $movie->canFeature()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'feature' ) )}'>{lang="feature"}</a></li> {{endif}} {{if $movie->canUnfeature()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unfeature' ) )}'>{lang="unfeature"}</a></li> {{endif}} {{if $movie->canPin()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'pin' ) )}'>{lang="pin"}</a></li> {{endif}} {{if $movie->canUnpin()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unpin' ) )}'>{lang="unpin"}</a></li> {{endif}} {{if $movie->canHide()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'hide' ) )}' data-ipsDialog data-ipsDialog-title="{lang="hide"}">{lang="hide"}</a></li> {{endif}} {{if $movie->canUnhide()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unhide' ) )}'>{{if $movie->hidden() === 1}}{lang="approve"}{{else}}{lang="unhide"}{{endif}}</a></li> {{endif}} {{if $movie->canLock()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'lock' ) )}'>{lang="lock"}</a></li> {{endif}} {{if $movie->canUnlock()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unlock' ) )}'>{lang="unlock"}</a></li> {{endif}} {{if $movie->canMove()}} <li class='ipsMenu_item'><a href='{$movie->url()->setQueryString( array( 'do' => 'move' ) )}' data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title="{lang="move"}">{lang="move"}</a></li> {{endif}} {{if $movie->canDelete()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete' ) )}' data-confirm>{lang="delete"}</a></li> {{endif}} {{if $movie->canOnMessage( 'add' )}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'messageForm' ) )}' data-ipsDialog data-ipsDialog-title='{lang="add_message"}'>{lang='add_message'}</a></li> {{endif}} {{if $movie->canToggleItemModeration()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'toggleItemModeration' ) )}' data-confirm data-confirmMessage='{{if $movie->itemModerationEnabled()}}{lang="disable_movie_moderation_confirm"}{{else}}{lang="enable_movie_moderation_confirm"}{{endif}}'>{{if $movie->itemModerationEnabled()}}{lang="disable_topic_moderation"}{{else}}{lang="enable_topic_moderation"}{{endif}}</a></li> {{endif}} {{if \IPS\Member::loggedIn()->modPermission('can_reimport_data')}} <li class='ipsMenu_sep'><hr></li> <li class="ipsMenu_item"><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'reimport' ) )}' data-confirm>{lang="movies_reimport_{$movie->type}_data"}</a></li> {{endif}} {{if \IPS\Member::loggedIn()->modPermission('can_view_moderation_log')}} <li class='ipsMenu_sep'><hr></li> <li class="ipsMenu_item"><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'modLog' ) )}' data-ipsDialog data-ipsDialog-title='{lang="moderation_history"}'>{lang="moderation_history"}</a></li> {{endif}} {{endif}} </ul> </li> {{elseif $movie->canReportOrRevoke() === TRUE}} <li> <a href='{$movie->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="report_file"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="report_file"}" class='ipsButton ipsButton_link ipsButton_verySmall ipsButton_fullWidth'>{lang="report"}</a> </li> {{endif}} </ul> {{endif}} </div> {{endif}} </div> <div class='ipsBox ipsPadding ipsResponsive_pull ipsResponsive_showPhone ipsMargin_top'> <div class='ipsGap_row:3'> <div> {template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"} </div> {{if \count( $movie->shareLinks() )}} <div> {template="shareButton" app="core" group="sharelinks" params="$movie, 'verySmall', 'light'"} </div> {{endif}} <div> {template="promote" app="core" group="global" params="$movie"} </div> </div> </div> {{if $prev || $next}} <div class='ipsGrid ipsGrid_collapsePhone ipsPager ipsSpacer_top'> {{if $prev !== NULL}} <div class="ipsGrid_span6 ipsType_left ipsPager_prev"> <a href="{$prev->url()}" title="{lang="prev_movie"}" rel="prev"> <span class="ipsPager_type">{lang="prev_movie"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{wordbreak="$prev->mapped('title')"}</span> </a> </div> {{else}} <div class="ipsGrid_span6 ipsType_left ipsPager_prev"> <a href="{$movie->container()->url()}" title="{lang="go_to_category" sprintf="$movie->container()->_title"}" rel="up"> <span class="ipsPager_type">{lang="movie_back_to_category"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{lang="$movie->container()->_title" wordbreak="true"}</span> </a> </div> {{endif}} {{if $next !== NULL}} <div class="ipsGrid_span6 ipsType_right ipsPager_next"> <a href="{$next->url()}" title="{lang="next_movie"}" rel="next"> <span class="ipsPager_type">{lang="next_movie"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{wordbreak="$next->mapped('title')"}</span> </a> </div> {{else}} <div class="ipsGrid_span6 ipsType_right ipsPager_next"> <a href="{$movie->container()->url()}" title="{lang="go_to_category" sprintf="$movie->container()->_title"}" rel="up"> <span class="ipsPager_type">{lang="movie_back_to_category"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{lang="$movie->container()->_title" wordbreak="true"}</span> </a> </div> {{endif}} </div> <hr class='ipsHr'> {{endif}} {{if $commentsAndReviews}} <a id="replies"></a> <h2 class='ipsHide'>{lang="user_feedback"}</h2> <div class='ipsMargin_top'>{$commentsAndReviews|raw}</div> {{endif}} </div> </div> {{if $movie->container()->club()}} </div> {{endif}} <div class="ipsClear ipsClearfix"></div> </pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_2_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message</span></pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_3_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message</span></pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_4_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message </span></pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_5_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message</span></pre> </div> </section> {{if \count( $movies )}} {{$rowCount=0;}} {{foreach $movies as $movie}} {{$rowCount++;}} <li class='ipsDataItem {{if $movie->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $movie, 'tableClass' ) && $movie->tableClass()}}ipsDataItem_{$movie->tableClass()}{{endif}} {{if $movie->hidden()}}ipsModerated{{endif}}' data-ipsLazyLoad> <div class='ipsDataItem_generic ipsDataItem_size3 ipsPos_top'> <!-- JWSE Rating Circle --> {{$fields = $movie->customFields();}} {{if $fields['field_5']}} <div class="jwse_ratingCircle jwse_ratingCircle-categoryList"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-categoryList orange" > <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle jwse_ratingCircle-categoryList"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-categoryList"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} {{if $movie->cover_thumb}} {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'medium'"} {{else}} <a class="sosMovieCover_medium" title='{lang="view_this" sprintf="$movie->title"}' href="{$movie->url()}"> <img src='{resource="movie.PNG" app="movies" location="front"}'> </a> {{endif}} </div> <div class='ipsDataItem_main'> <h3 class='ipsDataItem_title ipsType_center ipsType_sectionHead ipsContained_container'> {{if $movie->unread()}} <span><span class='ipsItemStatus ipsItemStatus_small' data-ipsTooltip title='{{if $movie->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;</span> {{endif}} {{if $movie->mapped('locked') || $movie->mapped('pinned') || $movie->affiliate || $movie->mapped('featured') || $movie->hidden() === -1 || $movie->hidden() === 1}} {{if $movie->mapped('locked')}} <span><span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_negative" data-ipsTooltip title='{lang="locked"}'><i class='fa fa-lock'></i></span></span> {{endif}} {{if $movie->hidden() === -1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span> {{elseif $movie->hidden() === 1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span> {{endif}} {{if $movie->mapped('pinned')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span> {{endif}} {{if $movie->mapped('featured')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span> {{endif}} {{endif}} {{if $movie->prefix()}} <span>{template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"}</span> {{endif}} <span class='ipsType_break ipsContained'> <a href='{$movie->url()}' class='' title='{{if $movie->mapped('title')}}{$movie->mapped('title')}{{else}}{lang="content_deleted"}{{endif}} {{if $movie->canEdit()}}{lang="click_hold_edit"}{{endif}}' {{if $movie->canEdit()}} data-role="editableTitle"{{endif}} {{if $movie->tableHoverUrl and $movie->canView()}} data-ipsHover data-ipsHover-target='{$movie->url()->setQueryString('preview', 1)}' data-ipsHover-timeout='1.5'{{endif}}> <span> {{if $movie->mapped('title') or $movie->mapped('title') == 0}}{$movie->mapped('title')}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}} </span> </a> </span> </h3> <p class='ipsType_light'>{lang="byline_nodate" htmlsprintf="$movie->author()->link()"}</p> <div class='ipsType_richText ipsType_normal ipsSpacer_both' data-ipsTruncate data-ipsTruncate-type="remove" data-ipsTruncate-size="2 lines"> {$movie->truncated(TRUE)|raw} </div> <p class='ipsType_reset ipsType_light ipsType_blendLinks'> {{if \IPS\Request::i()->app != 'movies'}} {lang="in"} <a href="{$movie->container()->url()}">{$movie->container()->_title}</a> {{endif}} </p> {{if \count( $movie->tags() )}} <div class=" ipsSpacer_top"> {template="tags" group="global" app="core" params="$movie->tags()"} </div> {{endif}} <p class='ipsType_reset'> <ul class="ipsList_inline"> {{if $movie->runtime}} {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <li class='ipsType_light ipsType_blendLinks'>{lang="movie_running_{$movie->type}"}: {$runtime}</li> {{endif}} {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <li class='ipsType_light ipsType_blendLinks'>{$genres}</li> </ul> </p> </div> <div class='ipsDataItem_generic ipsDataItem_size8'> {{if $movie->container()->allowcomments}} <p class='ipsType_normal {{if !$movie->comments}}ipsType_light{{endif}}'> {{if $movie->comments}} <a href='{$movie->url()->setQueryString( 'tab', 'comments' )->setFragment('replies')}'> {{endif}} <i class='fa fa-comment'></i> {lang="num_comments" pluralize="$movie->comments"} {{if $movie->comments}} </a> {{endif}} </p> {{endif}} {{if $movie->container()->allowreviews}} {{if $movie->reviews}} <a href='{$movie->url()->setQueryString( 'tab', 'reviews' )->setFragment('reviews')}'> {{endif}} {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$movie->reviews"})</span> {{if $movie->reviews}} </a> {{endif}} {{endif}} <p class='ipsType_medium'><strong>{{if $movie->updated == $movie->submitted}}{lang="submitted"} {datetime="$movie->submitted"}{{else}}{lang="updated"} {datetime="$movie->updated"}{{endif}}</strong></p> </div> {{if method_exists( $table, 'canModerate' ) AND $table->canModerate()}} <div class='ipsDataItem_modCheck'> <span class='ipsCustomInput'> <input type='checkbox' data-role='moderation' name="moderate[{$movie->id}]" data-actions="{expression="implode( ' ', $table->multimodActions( $movie ) )"}" data-state='{{if $movie->tableStates()}}{$movie->tableStates()}{{endif}}'> <span></span> </span> </div> {{endif}} </li> {{endforeach}} {{endif}} <li class='ipsAreaBackground_reset ipsType_blendLinks ipsClearfix sosMovieIndexBlock sosMovieIndexBlockItem ipsPad_half ipsCarousel_item' data-ipsLazyLoad> <div class="indexBlock"> <div class='ipsPos_center'> <div class="sosMovieCover"> <!-- JWSE Rating Circle --> {{$fields = $movie->customFields();}} {{if $fields['field_5']}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock orange" > <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} <a href='{$movie->url()}' title='{lang="view_this_movie" sprintf="$movie->title"}'> <div class=""> {{if $movie->cover_thumb}} {template="bgCover" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'big'"} {{else}} <a title='{lang="view_this" sprintf="$movie->title"}' href="{$movie->url()}"> <img class="bgMovieCover" src='{resource="movie.PNG" app="movies" location="front"}'> </a> {{endif}} </div> </a> <div class="jwse_MoviePhoto_Footer jwse_MoviePhoto_Footer-indexBlock"> {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; </div> </div> </div> </div> </li> <li class='ipsCarousel_item ipsAreaBackground_reset ipsPad' data-ipsLazyLoad> <div class='ipsColumns ipsColumns_collapsePhone'> <div class='ipsColumn ipsColumn_medium ipsType_center'> <!-- JWSE Rating Circle --> {{$fields = $movie->customFields();}} {{if $fields['field_5']|raw}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock jwse_ratingCircle-Featured"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock circular-chart-Featured orange" > <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{else}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock jwse_ratingCircle-Featured"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock circular-chart-Featured"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'large'"} </div> <div class='ipsColumn ipsColumn_fluid'> <h1 class='ipsType_pageTitle ipsContained_container'> {{if $movie->mapped('locked')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="movies_locked"}'><i class='fa fa-lock'></i></span></span> {{endif}} {{if $movie->hidden() === 1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span> {{elseif $movie->hidden() === -1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span> {{elseif $movie->hidden() === -2}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->deletedBlurb()}'><i class='fa fa-trash'></i></span></span> {{endif}} {{if $movie->canToggleItemModeration() and $movie->itemModerationEnabled()}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="topic_moderation_enabled"}'><i class='fa fa-user-times'></i></span></span> {{endif}} {{if $movie->mapped('pinned')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span> {{endif}} {{if $movie->mapped('featured')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span> {{endif}} {{if $movie->canEdit()}} <span class='ipsType_break ipsContained' data-controller="core.front.core.moderation"> {{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<span data-role="editableTitle" title='{lang="click_hold_edit"}'><a href='{$movie->url()}'>{$movie->title}</a></span> </span> {{else}} <span class='ipsType_break ipsContained'>{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<a href='{$movie->url()}'>{$movie->title}</a></span> {{endif}} {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="jwse_movieYear">( {$date->format('Y')} )</span> {{endif}} {{if $fields['field_4']}} <span class="jwse_movieYear">( {{$fields = $movie->customFields();}}{$fields['field_4']} )</span> {{endif}} {{if $movie->prefix() OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}} <span {{if !$movie->prefix()}}class='ipsHide'{{endif}} {{if ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}data-editablePrefix{{endif}}> {template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"} </span> {{endif}} </h1> <div class="jswe_movieMeta"> {{$fields = $movie->customFields();}} {{if $fields['field_6']}} <span class="ipsDataItem_generic certification">{{$fields = $movie->customFields();}}{$fields['field_6']|raw}</span> {{endif}} <!-- Movie Release Date --> {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="ipsDataItem_generic">{datetime="$date" dateonly="true"}</span> {{endif}} <!-- Movie Genres --> {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <span class="ipsDataItem_generic">{$genres}</span> <!-- Movie Runtime --> {{if $movie->runtime}} {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <span class="ipsDataItem_generic">{$runtime}</span> {{endif}} </div> <div class='ipsType_richText ipsType_normal ipsSpacer_both' data-ipsTruncate data-ipsTruncate-type="remove" data-ipsTruncate-size="2 lines"> {$movie->truncated(TRUE)|raw} </div> <p class='ipsType_reset'> <ul class="ipsList_inline"> {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <li class='ipsType_light ipsType_blendLinks'>{lang="movie_running_{$movie->type}"}: {$runtime} </li> {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <li class='ipsType_light ipsType_blendLinks'>{$genres} </li> </ul> </p> <ul class='ipsToolList ipsToolList_horizontal ipsSpacer_top'> <li class='ipsPos_left'> <a href='{$movie->url()}' class='ipsButton ipsButton_light ipsButton_fullWidth ipsButton_small' title='{lang="view_this_movie" sprintf="$movie->title"}'>{lang="more_information"} <i class="far fa-play-circle"></i></a> </li> </ul> </div> </div> </li> /*** Custom Styles ***/ .jwse_note{ color: #294459 } .ipsBadge_positive{ --badge--background: var(--color-palegrey); --badge--color: var(--color-jwsecoral); } /*** Youtube Popup ***/ .JWSE_video-container { overflow: hidden; position: relative; width:100%; } .JWSE_video-container::after { padding-top: 56.25%; display: block; content: ''; } .JWSE_video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .JWSE_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align:center; height:170px; width:170px; background: rgb(41,68,89, 0.5); display:block; border-radius:100% } .JWSE_playBtn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:70px; opacity:0.9; color:white; display:block; } .JWSE_playTxt{ position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); font-size:16px; color:white; display:block; } /*** My Rating Circle ***/ .jwse_MyReviewText{ position:relative; } .jwse_ratingCircle { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:100px; } .jwse_ratingCircle-indexBlock { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:50px; } .jwse_ratingCircle-categoryList { float: left; position: absolute; top: -5px; left: 112px; z-index:999; width:50px; } .circular-chart{ display: block; margin: 10px auto; max-width: 80%; max-height: 100px; background-color: var(--color-baseblue); border-radius: 50%; } .circular-chart-indexBlock{ max-width:100%; max-height:50px; top:-6px; right: 3px; position:relative; } .circular-chart-Featured{ max-height:50px; top:-5px; right: 17px; position:relative; } .circular-chart_unrated{ background-color: var(--color-palegrey); } .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; opacity: 0.3; } .circle { fill: none; stroke-width: 3.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-chart.orange .circle { stroke: var(--color-jwsecoral); } .percentage { fill: white; font-family: Montserrat; font-size: 13px; text-anchor: middle; } .percentageSmall{ fill: white; font-family: Montserrat; font-size: 5px; text-anchor: middle; } .unrated{ font-size:5px; } /*** View CSS ***/ .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top:-15px; min-height:800px; background-image:url(https:{media="528"}); background-color: #294459; background-position:top center; background-repeat:no-repeat; background-size:cover; } .ipsPageHeader.ipsClearfix.ipsSpacer_bottom { margin-top: -200px; } .ipsColumn_veryWide { width: 300px; } .ipsBox.ipsResponsive_pull { background-color: rgba(255, 255, 255, 0.6); } .whiteBack { font-size: 18px; background-color: white; border-radius:7px; } .ipsCarousel_inner { height: 230px !important; } .sosMovieCover_large img { margin: 0px auto; width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; max-width: 300px !important; max-height: auto; border-top-right-radius: 7px; border-top-left-radius: 7px; } .jwse_MoviePhoto_Footer{ background-color: var(--color-baseblue); text-align:center; padding:15px 0; border-bottom-right-radius:7px; border-bottom-left-radius:7px; color:white !important; } .jwse_MoviePhoto_Footer-indexBlock{ position:absolute; display:block; width:100%; bottom:0; z-index:999; padding: 3px 0; margin-bottom:-28px; } .jwse_MoviePhoto_Footer-indexBlock .ipsRating.ipsRating_large{ font-size:10px !important; } .ipsRating .ipsRating_mine .ipsRating_on .fa-star { color: var(--color-jwsecoral) !important; } .jwse_movieYear{ font-size:16px; } .ipsDataItem_generic{ display: table-cell; padding: 5px 15px 15px 0; vertical-align: center; } .ipsDataItem_generic.certification { border: 1px solid #666; padding: 0 5px; display: block; float: left; margin: 5px; } .jwse_movieSubtitle{ font-weight:600; font-style: italic; display:block; } .jwse_MyReviewFace{ background-image:url(https:{media="530"}); background-size:cover; width:100px; height:100px; float:left; display:block; } .jwse_MyReviewTextRating { float: right; margin: 45px; } .jwse_MyReviewText{ margin-left:130px; background-color: var(--color-baseblue); color: white; font-size: 16px; padding:10px 30px; position:relative; border-radius:7px; } .jwse_MyReviewText:after { content: ''; position: absolute; left: 0; top: 30px; width: 0; height: 0; border: 20px solid transparent; border-right-color: var(--color-baseblue); border-left: 0; margin-top: -20px; margin-left: -20px; opacity:0.4; } .jwse_movieDescription { margin-top: 20px; display: block; font-size: 16px; font-weight: bold; margin-bottom: -10px; } .jwseHeroContainer { position: relative; top: 0px !important; } .ipsCarousel .ipsCarousel_inner { height: 230px !important; } #elMoviesFeatured .ipsCarousel .ipsCarousel_inner { height: 322px !important; } #elMoviesFeatured .ipsCarousel_item{ background-color:#FFF2CC; } #elMoviesFeatured .ipsButton { background-color: var(--color-baseblue) !important; color: white; } I hope this will help get you started building your own Movie database. If you use this for your own website, please drop a link here, so we can see how it turned out. Also if you need help, just drop a comment here or in the forum and I will try my best to help you. Good luck and enjoy! View full blog article
  5. This week I took a look at a plugin I had and decided to style it a bit to fit the image I had in my mind. As it turned out this was very easy and the only thing that stopped me for a while was how to use custom fields. Once that was done it was smooth sailing and quite fun to customize. This is how I did it, so you can do it yourself if you want. The app that we will be working with is the Movies & TV Shows by Adriano Faria. This is an amazing app that use the TMDB database to fetch data for the movies and TV shows, making adding movies and TV shows fast and fun. Adriano has several similar apps and I also have the Books version that I probably look at later as well. In order to modify the app we need to go to the themes (customization -> Apperance -> Themes) and click the Edit HTML & CSS button. This takes us to the templates for our theme. There you will have two tabs, one for templates and one for CSS. In both of those tabs we will have a section called "Movies". This is where we find the app templates and the CSS that the app use. Inside the templates we will focus on a few templates to make the design that we want to make. View -> View: This is the template that control the layout for when you look at a movie or tv show. Index -> indexBlock: This is the template that control the latest and random items block on the start page. Index -> featuredMovie: This is the template that control the featured movies block on the start page. front -> browse -> rows: This is the template that control the listing inside a category. We will also work with the CSS that is located in the CSS tab: movies -> front -> movies.css Changing the view The first thing I did was to change the View template. I had the idea that I wanted to have a big background image behind the content. This is a bit tricky since the content is trapped inside a div that have a fixed width. The second thing I wanted was to add more data and I especially wanted to add a custom rating icon for my rating since I will use this as my recommendation site of sorts. So first I needed to figure out how to add custom fields and decide what fields I wanted. I decided on the following fields: Official Trailer (ID:8) - The ID of the trailer, so I can add it to an embedded video player Certification (ID:6) - Just a text field to add the certification. TV Year (ID:4) - Just a text field here as well. My Review (ID:2) - An editor field, so I can write my review. My Rating (ID:5) - Just a number field, so I can add values between 1 and 100. Backdrop (ID:1) - An upload field, so I can add a big image behind the content. In order to show these fields I need to use this little piece of code: {{$fields = $movie->customFields();}}{$fields['field_1']} I then just change the field_1 to the field I want to display. You can see what the id of your field is by hovering over the edit button in the custom fields view. I also want to be able to add some conditions, so I only see things if the field is filled in and in order to do that I use this: {{if $movie->customFields('field_1')}} With that we can now add our custom fields to the template and start looking at how to style them. The Backdrop The backdrop is shown by displaying the file that we uploaded, but it will be constrained within the content and we want to break it out from that. This is where we use a little hack in CSS and I added a class to the div surrounding the backdrop and then added this CSS to it: .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top:-15px; min-height:800px; background-image:url(https:{media="528"}); background-color: #294459; background-position:top center; background-repeat:no-repeat; background-size:cover; } This now show the image in full width and I have this idea that I want to add a play button to the backdrop that show a trailer when I click it. There are several ways to do this, but I decided to use the built-in function in Invision Community called ips.ui.dialog. This nifty function allow me to open a modal and either populate it with a link or content inside the same page. As it does not work to refer directly to the url of the trailer, we use the embed code instead and place the content in a hidden div in the document. {{if $movie->customFields('field_1')}} <div class="full-width" style="background-image:url('https://jimiwikman.se/uploads/{{$fields = $movie->customFields();}}{$fields['field_1']}');"> <!-- Official Trailer --> {{if $fields['field_8']}} <a href='#dialogContent' data-ipsDialog data-ipsDialog-size="fullscreen" data-ipsDialog-content='#dialogContent'> <div class="JWSE_play"> <span class="JWSE_playBtn"><i class="far fa-play-circle"></i></span> <span class="JWSE_playTxt">Play Trailer</span> </div> </a> <div id="dialogContent" class="JWSE_video-container ipsHide"> <iframe src="https://www.youtube.com/embed/{$fields['field_8']}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> {{endif}} In the code I refer to the custom field I created for the official trailer that hold the movie ID. I also wrap the code in an if query, so it only shows if a value is entered. I use FontAwesome to show the play icon and I define the modal to be full view using the data-ipsDialog-size attribute. Currently, narrow, medium, wide and full screen are supported as values for this option. I then style this with the following CSS: /*** Youtube Popup ***/ .JWSE_video-container { overflow: hidden; position: relative; width:100%; } .JWSE_video-container::after { padding-top: 56.25%; display: block; content: ''; } .JWSE_video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .JWSE_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align:center; height:170px; width:170px; background: rgb(41,68,89, 0.5); display:block; border-radius:100% } .JWSE_playBtn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:70px; opacity:0.9; color:white; display:block; } .JWSE_playTxt{ position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); font-size:16px; color:white; display:block; } My Rating Adding a rating icon to make the rating number look cool is next, and I wanted a circle with numbers inside. This can be done in any number of ways, but I decided on a fairly simple version of a SVG circle using css keyframes for animation. <!-- JWSE Rating Circle --> {{if $fields['field_5']}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} As you can see in the code I have two versions of the circle, one for when I have added a value and one for when I have not. I had to add a condition to the second version because as I have a number field it will always be 0, which means that it is never empty. This means that the first condition will always be true, even if I have not added anything to the field. To this I added the following CSS: /*** My Rating Circle ***/ .jwse_MyReviewText{ position:relative; } .jwse_ratingCircle { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:100px; } .jwse_ratingCircle-indexBlock { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:50px; } .jwse_ratingCircle-categoryList { float: left; position: absolute; top: -5px; left: 112px; z-index:999; width:50px; } .circular-chart{ display: block; margin: 10px auto; max-width: 80%; max-height: 100px; background-color: var(--color-baseblue); border-radius: 50%; } .circular-chart-indexBlock{ max-width:100%; max-height:50px; top:-6px; right: 3px; position:relative; } .circular-chart-Featured{ max-height:50px; top:-5px; right: 17px; position:relative; } .circular-chart_unrated{ background-color: var(--color-palegrey); } .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; opacity: 0.3; } .circle { fill: none; stroke-width: 3.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-chart.orange .circle { stroke: var(--color-jwsecoral); } .percentage { fill: white; font-family: Montserrat; font-size: 13px; text-anchor: middle; } .percentageSmall{ fill: white; font-family: Montserrat; font-size: 5px; text-anchor: middle; } .unrated{ font-size:5px; } As you can see I have variants for the indexBlock and featuredBlock as well as adustment for the category list. This because the images are different for those areas and we need to adjust a bit. Let's put it all together With this I now have all the custom fields shown on the page, a backdrop that cover the full width of the page and I have a visual representation of the rating. All that is left is to put things together in the templates and add styles to it. We also need to adjust a bit for mobile view. With permission from Adriano, I will show you the code I use, and you can copy and paste it into your own movies theme files to get the layout I use here on this site. I have not cleaned these up, so there are some areas that need cleaning, but it works. View Rows indexBlock featuredMovie CSS <div class="ipsRichEmbed" style="max-width: 500px; border: 1px solid rgba(0,0,0,0.1); "> <div class="ipsRichEmbed_masthead ipsRichEmbed_mastheadBg ipsType_center"> <a href="https://www.vowel.com/" rel="external nofollow" style="background-image: url( 'https://s3.amazonaws.com/com.vowel.resources/social/vowel-share-thumb.jpg' ); background-position: center; background-repeat: no-repeat; background-size: cover; height: 120px; display: block;"><img alt="vowel-share-thumb.jpg" class="ipsHide" data-loaded="true" data-src="https://s3.amazonaws.com/com.vowel.resources/social/vowel-share-thumb.jpg" src="https://jimiwikman.se/applications/core/interface/js/spacer.png" style="height: auto;"></a> </div> <div style="padding: 10px;"> <h3 class="ipsRichEmbed_itemTitle ipsTruncate ipsTruncate_line ipsType_blendLinks"> <a href="https://www.vowel.com/" rel="external nofollow" style="text-decoration: none; margin-bottom: 5px;" title="Home - Vowel">Home - Vowel</a> </h3> <div class="ipsType_light"> WWW.VOWEL.COM </div> <hr class="ipsHr"> <div class="ipsSpacer_top ipsSpacer_half" data-ipstruncate="" data-ipstruncate-size="3 lines" data-ipstruncate-type="remove" style="overflow-wrap: break-word;"> <span>Vowel is a tool that captures your team&rsquo;s meetings. Use it to annotate meetings in real-time, tag action items, call back ideas verbatim&mdash;and a whole lot more.</span> </div> </div> </div> <div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" data-ipstabbar="" data-ipstabbar-contentarea="#" data-ipstabbar-defaulttab="1" data-ipstabbar-updateurl="false" id="elTabBar"> <ul role="tablist"> <li> <a aria-selected="true" class="ipsType_center ipsTabs_item ipsTabs_activeItem" href="" id="1" rel="" role="tab"> View </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="2" rel="" role="tab"> Rows </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="3" rel="" role="tab"> indexBlock </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="4" rel="" role="tab"> featuredMovie </a> </li> <li> <a class="ipsType_center ipsTabs_item" href="" id="5" rel="" role="tab"> CSS </a> </li> </ul> </div> <section class="ipsTabs_panels ipsTabs_contained"> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_1_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> {{if $club = $movie->container()->club()}} {{if settings.clubs and settings.clubs_header == 'full'}} {template="header" app="core" group="clubs" params="$club, $movie->container()"} {{endif}} <div id='elClubContainer'> {{endif}} {{$fields = $movie->customFields();}} {{if $fields['field_1']}} <div class="full-width" style="background-image:url('https://jimiwikman.se/uploads/{$fields['field_1']|raw}');"> <!-- Official Trailer --> {{if $fields['field_8']}} <a href='#dialogContent' data-ipsDialog data-ipsDialog-size="fullscreen" data-ipsDialog-content='#dialogContent'> <div class="JWSE_play"> <span class="JWSE_playBtn"><i class="far fa-play-circle"></i></span> <span class="JWSE_playTxt">Play Trailer</span> </div> </a> <div id="dialogContent" class="JWSE_video-container ipsHide"> <iframe src="https://www.youtube.com/embed/{$fields['field_8']}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div> {{endif}} </div> {{else}} <div class="full-width" style="background-image:url('{media="528"}')"></div> {{endif}} <div class=""> <div class="ipsPageHeader ipsClearfix ipsSpacer_bottom"> {template="contentItemMessages" group="global" app="core" params="$movie->getMessages(), $movie"} <div class='ipsBox ipsResponsive_pull'> <div class='ipsColumns ipsColumns_collapsePhone'> <aside class='ipsColumn ipsColumn_veryWide ipsPadding_right:none'> <div class='ipsPad lg:ipsPos_sticky'> <div> {{if $movie->cover_thumb}} <div class='ipsPos_center'> <div class="sosMovieCover"> <!-- JWSE Rating Circle --> {{if $fields['field_5']}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, '', $movie->title, 'large'"} </div> <div class="jwse_MoviePhoto_Footer"> {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$movie->reviews"})</span> </div> </div> {{else}} <center><img src='{resource="movie.PNG" app="movies" location="front"}'></center> {{endif}} <hr class='ipsHr'> {{if $movie->imdb_id OR $movie->homepage OR $movie->wikipedia OR $movie->instagram OR $movie->facebook OR $movie->twitter OR $movie->justwatch}} <ul class='ipsList_inline ipsSpacer_both ipsType_center'> {{if $movie->homepage}} <li><a title="{lang="movies_homepage_visit"}" data-ipsTooltip target="_blank" href="{$movie->homepage}"> <i class="fa fa-link fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->imdb_id}} <li><a title="{lang="movies_imdb_page_visit"}" data-ipsTooltip target="_blank" href="https://www.imdb.com/title/{$movie->imdb_id}/"> <i class="fa fa-imdb fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->facebook}} <li><a title="{lang="movies_facebook_page"}" data-ipsTooltip target="_blank" href="{$movie->facebook}"> <i class="fa fa-facebook fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->instagram}} <li><a title="{lang="movies_instagram_page"}" data-ipsTooltip target="_blank" href="{$movie->instagram}"> <i class="fa fa-instagram fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->justwatch}} <li><a title="{lang="movies_justwatch_page"}" data-ipsTooltip target="_blank" href="{$movie->justwatch}"> <i class="fa fa-play fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->twitter}} <li><a title="{lang="movies_twitter_page"}" data-ipsTooltip target="_blank" href="{$movie->twitter}"> <i class="fa fa-twitter fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->wikipedia}} <li><a title="{lang="movies_wikipedia_page"}" data-ipsTooltip target="_blank" href="{$movie->wikipedia}"> <i class="fa fa-wikipedia-w fa-2x" aria-hidden="true"></i></a></li> {{endif}} {{if $movie->canEdit()}} <li> <a href="{$movie->url()->csrf()->setQueryString( array( 'do' => 'editUrls' ) )}" data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="movie_edit_urls"}"> <i data-ipsTooltip title="{lang='movie_edit_urls'}" class="fa fa-pencil fa-fw" aria-hidden="true"></i> </a> </li> {{endif}} </ul> <hr class='ipsHr'> {{endif}} <ul class="ipsDataList ipsDataList_reducedSpacing ipsSpacer_top"> <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_type"}</strong></span> <span class="ipsDataItem_generic">{lang="movie_type_{$movie->type}"}</span> </li> <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_status"}</strong></span> <span class="ipsDataItem_generic">{$movie->status}</span> </li> {{if $movie->type=='tv'}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_seasons"}</strong></span> <span class="ipsDataItem_generic">{$movie->seasons}</span> </li> <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_episodes"}</strong></span> <span class="ipsDataItem_generic">{$movie->episodes}</span> </li> {{endif}} {{if $movie->type=='movie'}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_original_language"}</strong></span> {{$language = \IPS\movies\Movie::getLanguageName( $movie->original_language );}} <span class="ipsDataItem_generic">{$language}</span> </li> {{if $movie->budget}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_budget"}</strong></span> <span class="ipsDataItem_generic">{expression="\IPS\Member::loggedIn()->language()->formatNumber( $movie->budget, 2 )"}</span> </li> {{endif}} {{if $movie->revenue}} <li class="ipsDataItem"> <span class="ipsDataItem_generic ipsDataItem_size3"><strong>{lang="movie_revenue"}</strong></span> <span class="ipsDataItem_generic">{expression="\IPS\Member::loggedIn()->language()->formatNumber( $movie->revenue, 2 )"}</span> </li> {{endif}} {{endif}} </ul> {{if $movie->topic()}} <hr class='ipsHr'> <a href='{$movie->topic()->url()}' title='{lang="movie_discussion_topic"}' class='ipsButton ipsButton_primary ipsButton_fullWidth'>{lang="movie_discussion_topic"}</a> {{endif}} <div class='ipsResponsive_showPhone ipsResponsive_block ipsSpacer_top'> {template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"} </div> </div> </div> </aside> <article class='ipsColumn ipsColumn_fluid ipsPadding_left:none'> <div class='ipsPad'> <section class='ipsType_normal whiteBack'> <div class='ipsPageHeader ipsResponsive_pull ipsBox ipsPadding ipsSpacer_bottom'> <div class='ipsFlex ipsFlex-ai:center ipsFlex-fw:wrap ipsGap:4'> <div class='ipsFlex-flex:11'> <h1 class='ipsType_pageTitle ipsContained_container'> {{if $movie->mapped('locked')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="movies_locked"}'><i class='fa fa-lock'></i></span></span> {{endif}} {{if $movie->hidden() === 1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span> {{elseif $movie->hidden() === -1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span> {{elseif $movie->hidden() === -2}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->deletedBlurb()}'><i class='fa fa-trash'></i></span></span> {{endif}} {{if $movie->canToggleItemModeration() and $movie->itemModerationEnabled()}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="topic_moderation_enabled"}'><i class='fa fa-user-times'></i></span></span> {{endif}} {{if $movie->mapped('pinned')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span> {{endif}} {{if $movie->mapped('featured')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span> {{endif}} {{if $movie->canEdit()}} <span class='ipsType_break ipsContained' data-controller="core.front.core.moderation"> {{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<span data-role="editableTitle" title='{lang="click_hold_edit"}'>{$movie->title}</span> </span> {{else}} <span class='ipsType_break ipsContained'>{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}{$movie->title}</span> {{endif}} {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="jwse_movieYear">( {$date->format('Y')} )</span> {{endif}} {{if $fields['field_4']}} <span class="jwse_movieYear">( {{$fields = $movie->customFields();}}{$fields['field_4']} )</span> {{endif}} {{if $movie->prefix() OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}} <span {{if !$movie->prefix()}}class='ipsHide'{{endif}} {{if ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}data-editablePrefix{{endif}}> {template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"} </span> {{endif}} </h1> <div class="jswe_movieMeta"> {{if $fields['field_6']}} <span class="ipsDataItem_generic certification">{{$fields = $movie->customFields();}}{$fields['field_6']|raw}</span> {{endif}} <!-- Movie Release Date --> {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="ipsDataItem_generic">{datetime="$date" dateonly="true"}</span> {{endif}} <!-- Movie Genres --> {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <span class="ipsDataItem_generic">{$genres}</span> <!-- Movie Runtime --> {{if $movie->runtime}} {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <span class="ipsDataItem_generic">{$runtime}</span> {{endif}} </div> {{if $movie->subtitle}} <span class="jwse_movieSubtitle">{$movie->subtitle}</span> {{endif}} <span class="jwse_movieDescription">{lang="meta_description"}</span> <p> {$movie->description|raw} </p> {{if \count( $movie->tags() ) OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) )}} {template="tags" group="global" app="core" params="$movie->tags(), FALSE, FALSE, ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) ) ? $movie->url() : NULL"} {{endif}} </div> </div> <hr class='ipsHr'> <div class='ipsPageHeader__meta ipsFlex ipsFlex-jc:between ipsFlex-ai:center ipsFlex-fw:wrap ipsGap:3'> <div class='ipsFlex-flex:11'></div> <div class='ipsFlex-flex:01 ipsResponsive_hidePhone'> <div class='ipsFlex ipsFlex-ai:center ipsFlex-jc:center ipsGap:3 ipsGap_row:0'> {{if \count( $movie->shareLinks() )}} {template="shareButton" app="core" group="sharelinks" params="$movie"} {{endif}} {template="promote" app="core" group="global" params="$movie"} {template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"} </div> </div> </div> </div> {{if $movie->hidden() === 1 and $movie->canUnhide()}} <div class="ipsMessage ipsMessage_warning ipsSpacer_both"> <p class="ipsType_reset">{lang="movie_pending_approval"}</p> <br> <ul class='ipsList_inline'> <li><a href="{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unhide' ) )}" class="ipsButton ipsButton_positive ipsButton_verySmall" title='{lang="approve_title_link"}'><i class="fa fa-check"></i> {lang="approve"}</a></li> {{if $movie->canDelete()}} <li><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete' ) )}' data-confirm title='{lang="movies_delete_title"}' class='ipsButton ipsButton_negative ipsButton_verySmall'><i class='fa fa-times'></i> {lang="delete"}</a></li> {{endif}} </ul> </div> {{endif}} <div class='ipsTabs ipsClearfix' id='elTabBar' data-ipsTabBar data-ipsTabBar-contentArea='#elTabContent' data-ipsTabBar-updateURL='false'> <a href='#elTabBar' data-action='expandTabs'><i class='fa fa-caret-down'></i></a> <ul role='tablist'> <li role='presentation'> <a href='{$movie->url()}' role='tab' id='elTabMovie' class='ipsTabs_item' aria-selected="true"> My Thoughts </a> </li> {{if \IPS\Settings::i()->movies_cast}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'cast' ) )}' id='elTabCast' role='tab' class='ipsTabs_item'> {lang="movies_tab_cast"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_crew}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'crew' ) )}' id='elTabCrew' role='tab' class='ipsTabs_item'> {lang="movies_tab_crew"} </a> </li> {{endif}} {{if $movie->type == 'tv'}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'seasons' ) )}' id='elTabEpisodes' role='tab' class='ipsTabs_item'> {lang="movies_tab_seasons"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_videos}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'videos' ) )}' id='elTabVideos' role='tab' class='ipsTabs_item'> {lang="movies_tab_videos"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_posters}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'posters' ) )}' id='elTabPosters' role='tab' class='ipsTabs_item'> {lang="movies_tab_posters"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_images}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'images' ) )}' id='elTabImages' role='tab' class='ipsTabs_item'> {lang="movies_tab_images"} </a> </li> {{endif}} {{if \IPS\Settings::i()->movies_similar}} <li role='presentation'> <a href='{$movie->url()->setQueryString( array( 'do' => 'getMovieDataMovieView', 'type' => 'similar' ) )}' id='elTabSimilar' role='tab' class='ipsTabs_item'> {{if $movie->type == 'movie'}} {lang="movies_tab_similar"} {{else}} {lang="movies_tab_similar_tv"} {{endif}} </a> </li> {{endif}} </ul> </div> <section id='elTabContent'> <div class="ipsBox ipsPad"> <div itemprop='text' data-controller='core.front.core.lightboxedImages'> <div class="jwse_MyReviewFace"></div> <div class="jwse_MyReviewText"> <span class="jwse_MyReviewTextRating"> <!-- JWSE Rating Circle --> {{if $fields['field_5']}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart orange"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{else}} <div class="jwse_ratingCircle"> <svg viewBox="0 0 36 36" class="circular-chart"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} </span> {{if $fields['field_2']}} {{$fields = $movie->customFields();}}{$fields['field_2']|raw} {{else}} <p> <i>I have not written a review for this {{if $movie->type == 'movie'}}Movie{{else}}TV Show{{endif}} yet.<br /> Write a comment and remind me to write one!</i> </p> {{endif}} </div> <br style="clear:both;" /> </div> {{if $movie->container()->auto_content AND \IPS\Member::loggedIn()->language()->checkKeyExists( "movies_category_{$movie->container()->id}_append_content" )}} {{$lang = \IPS\Member::loggedIn()->language()->addToStack( "movies_category_{$movie->container()->id}_append_content" );}} {{\IPS\Member::loggedIn()->language()->parseOutputForDisplay( $lang );}} {{$content = str_replace( "%MOVIENAME%", $movie->title, $lang );}} {{\IPS\Member::loggedIn()->language()->parseOutputForDisplay( $content );}} {$content|raw} {{endif}} </div> </section> </section> </div> </article> </div> {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') ) or $movie->canReportOrRevoke() or ( \IPS\IPS::classUsesTrait( $movie, 'IPS\Content\Reactable' ) and settings.reputation_enabled )}} <div class='ipsItemControls'> {{if \IPS\IPS::classUsesTrait( $movie, 'IPS\Content\Reactable' ) and settings.reputation_enabled}} {template="reputation" app="core" group="global" params="$movie"} {{endif}} {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') ) or $movie->canReportOrRevoke()}} <ul class='ipsComment_controls ipsClearfix ipsItemControls_left'> {{if ( $movie->canEdit() or $movie->canPin() or $movie->canUnpin() or $movie->canFeature() or $movie->canUnfeature() or $movie->canHide() or $movie->canUnhide() or $movie->canMove() or $movie->canLock() or $movie->canUnlock() or $movie->canDelete() ) or ( $movie->hidden() == -2 AND \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') )}} <li> <a href='#elMovieActions_menu' id='elMovieActions' class='ipsButton ipsButton_light ipsButton_verySmall ipsButton_fullWidth' data-ipsMenu>{lang="{$movie->type}_actions"} <i class='fa fa-caret-down'></i></a> <ul id='elMovieActions_menu' class='ipsMenu ipsMenu_auto ipsHide'> {{if $movie->canReportOrRevoke() === TRUE}} <li class='ipsMenu_item'> <a href='{$movie->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="report_movie"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="report_movie"}" >{lang="report"}</a> </li> <li class='ipsMenu_sep'><hr></li> {{endif}} {{if \IPS\Member::loggedIn()->modPermission('can_manage_deleted_content') AND $movie->hidden() == -2}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'restore' ) )}' data-confirm data-confirmSubMessage='{lang="restore_as_visible_desc"}'>{lang="restore_as_visible"}</a></li> <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'restoreAsHidden' ) )}' data-confirm data-confirmSubMessage='{lang="restore_as_hidden_desc"}'>{lang="restore_as_hidden"}</a></li> <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete', 'immediate' => 1 ) )}' data-confirm data-confirmSubMessage='{lang="delete_immediately_desc"}'>{lang="delete_immediately"}</a></li> {{else}} {{if $movie->canEdit()}} <li class='ipsMenu_item'><a href='{$movie->url()->setQueryString( array( 'do' => 'edit' ) )}' title='{lang="edit"}'>{lang="edit"}</a></li> {{endif}} {{if $movie->canFeature()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'feature' ) )}'>{lang="feature"}</a></li> {{endif}} {{if $movie->canUnfeature()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unfeature' ) )}'>{lang="unfeature"}</a></li> {{endif}} {{if $movie->canPin()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'pin' ) )}'>{lang="pin"}</a></li> {{endif}} {{if $movie->canUnpin()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unpin' ) )}'>{lang="unpin"}</a></li> {{endif}} {{if $movie->canHide()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'hide' ) )}' data-ipsDialog data-ipsDialog-title="{lang="hide"}">{lang="hide"}</a></li> {{endif}} {{if $movie->canUnhide()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unhide' ) )}'>{{if $movie->hidden() === 1}}{lang="approve"}{{else}}{lang="unhide"}{{endif}}</a></li> {{endif}} {{if $movie->canLock()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'lock' ) )}'>{lang="lock"}</a></li> {{endif}} {{if $movie->canUnlock()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'unlock' ) )}'>{lang="unlock"}</a></li> {{endif}} {{if $movie->canMove()}} <li class='ipsMenu_item'><a href='{$movie->url()->setQueryString( array( 'do' => 'move' ) )}' data-ipsDialog data-ipsDialog-size='narrow' data-ipsDialog-title="{lang="move"}">{lang="move"}</a></li> {{endif}} {{if $movie->canDelete()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'moderate', 'action' => 'delete' ) )}' data-confirm>{lang="delete"}</a></li> {{endif}} {{if $movie->canOnMessage( 'add' )}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'messageForm' ) )}' data-ipsDialog data-ipsDialog-title='{lang="add_message"}'>{lang='add_message'}</a></li> {{endif}} {{if $movie->canToggleItemModeration()}} <li class='ipsMenu_item'><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'toggleItemModeration' ) )}' data-confirm data-confirmMessage='{{if $movie->itemModerationEnabled()}}{lang="disable_movie_moderation_confirm"}{{else}}{lang="enable_movie_moderation_confirm"}{{endif}}'>{{if $movie->itemModerationEnabled()}}{lang="disable_topic_moderation"}{{else}}{lang="enable_topic_moderation"}{{endif}}</a></li> {{endif}} {{if \IPS\Member::loggedIn()->modPermission('can_reimport_data')}} <li class='ipsMenu_sep'><hr></li> <li class="ipsMenu_item"><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'reimport' ) )}' data-confirm>{lang="movies_reimport_{$movie->type}_data"}</a></li> {{endif}} {{if \IPS\Member::loggedIn()->modPermission('can_view_moderation_log')}} <li class='ipsMenu_sep'><hr></li> <li class="ipsMenu_item"><a href='{$movie->url()->csrf()->setQueryString( array( 'do' => 'modLog' ) )}' data-ipsDialog data-ipsDialog-title='{lang="moderation_history"}'>{lang="moderation_history"}</a></li> {{endif}} {{endif}} </ul> </li> {{elseif $movie->canReportOrRevoke() === TRUE}} <li> <a href='{$movie->url('report')}' data-ipsDialog data-ipsDialog-size='medium' data-ipsDialog-title="{lang="report_file"}" data-ipsDialog-remoteSubmit data-ipsDialog-flashMessage="{lang="report_submit_success"}" title="{lang="report_file"}" class='ipsButton ipsButton_link ipsButton_verySmall ipsButton_fullWidth'>{lang="report"}</a> </li> {{endif}} </ul> {{endif}} </div> {{endif}} </div> <div class='ipsBox ipsPadding ipsResponsive_pull ipsResponsive_showPhone ipsMargin_top'> <div class='ipsGap_row:3'> <div> {template="follow" app="core" group="global" params="'movies', 'movie', $movie->id, $movie->followersCount()"} </div> {{if \count( $movie->shareLinks() )}} <div> {template="shareButton" app="core" group="sharelinks" params="$movie, 'verySmall', 'light'"} </div> {{endif}} <div> {template="promote" app="core" group="global" params="$movie"} </div> </div> </div> {{if $prev || $next}} <div class='ipsGrid ipsGrid_collapsePhone ipsPager ipsSpacer_top'> {{if $prev !== NULL}} <div class="ipsGrid_span6 ipsType_left ipsPager_prev"> <a href="{$prev->url()}" title="{lang="prev_movie"}" rel="prev"> <span class="ipsPager_type">{lang="prev_movie"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{wordbreak="$prev->mapped('title')"}</span> </a> </div> {{else}} <div class="ipsGrid_span6 ipsType_left ipsPager_prev"> <a href="{$movie->container()->url()}" title="{lang="go_to_category" sprintf="$movie->container()->_title"}" rel="up"> <span class="ipsPager_type">{lang="movie_back_to_category"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{lang="$movie->container()->_title" wordbreak="true"}</span> </a> </div> {{endif}} {{if $next !== NULL}} <div class="ipsGrid_span6 ipsType_right ipsPager_next"> <a href="{$next->url()}" title="{lang="next_movie"}" rel="next"> <span class="ipsPager_type">{lang="next_movie"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{wordbreak="$next->mapped('title')"}</span> </a> </div> {{else}} <div class="ipsGrid_span6 ipsType_right ipsPager_next"> <a href="{$movie->container()->url()}" title="{lang="go_to_category" sprintf="$movie->container()->_title"}" rel="up"> <span class="ipsPager_type">{lang="movie_back_to_category"}</span> <span class="ipsPager_title ipsType_light ipsType_break">{lang="$movie->container()->_title" wordbreak="true"}</span> </a> </div> {{endif}} </div> <hr class='ipsHr'> {{endif}} {{if $commentsAndReviews}} <a id="replies"></a> <h2 class='ipsHide'>{lang="user_feedback"}</h2> <div class='ipsMargin_top'>{$commentsAndReviews|raw}</div> {{endif}} </div> </div> {{if $movie->container()->club()}} </div> {{endif}} <div class="ipsClear ipsClearfix"></div> </pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_2_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message</span></pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_3_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message</span></pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_4_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message </span></pre> </div> <div class="ipsTabs_panel" id="ipsTabs_elTabBar_5_panel"> <pre class="ipsCode prettyprint lang-html prettyprinted" id="ips_uid_9425_9" style=""> <span class="pln">Message</span></pre> </div> </section> {{if \count( $movies )}} {{$rowCount=0;}} {{foreach $movies as $movie}} {{$rowCount++;}} <li class='ipsDataItem {{if $movie->unread()}}ipsDataItem_unread{{endif}} {{if method_exists( $movie, 'tableClass' ) && $movie->tableClass()}}ipsDataItem_{$movie->tableClass()}{{endif}} {{if $movie->hidden()}}ipsModerated{{endif}}' data-ipsLazyLoad> <div class='ipsDataItem_generic ipsDataItem_size3 ipsPos_top'> <!-- JWSE Rating Circle --> {{$fields = $movie->customFields();}} {{if $fields['field_5']}} <div class="jwse_ratingCircle jwse_ratingCircle-categoryList"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-categoryList orange" > <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle jwse_ratingCircle-categoryList"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-categoryList"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} {{if $movie->cover_thumb}} {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'medium'"} {{else}} <a class="sosMovieCover_medium" title='{lang="view_this" sprintf="$movie->title"}' href="{$movie->url()}"> <img src='{resource="movie.PNG" app="movies" location="front"}'> </a> {{endif}} </div> <div class='ipsDataItem_main'> <h3 class='ipsDataItem_title ipsType_center ipsType_sectionHead ipsContained_container'> {{if $movie->unread()}} <span><span class='ipsItemStatus ipsItemStatus_small' data-ipsTooltip title='{{if $movie->unread() === -1}}{lang="new"}{{else}}{lang="updated"}{{endif}}'><i class="fa fa-circle"></i></span>&nbsp;</span> {{endif}} {{if $movie->mapped('locked') || $movie->mapped('pinned') || $movie->affiliate || $movie->mapped('featured') || $movie->hidden() === -1 || $movie->hidden() === 1}} {{if $movie->mapped('locked')}} <span><span class="ipsBadge ipsBadge_small ipsBadge_icon ipsBadge_negative" data-ipsTooltip title='{lang="locked"}'><i class='fa fa-lock'></i></span></span> {{endif}} {{if $movie->hidden() === -1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span> {{elseif $movie->hidden() === 1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span> {{endif}} {{if $movie->mapped('pinned')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span> {{endif}} {{if $movie->mapped('featured')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_small ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span> {{endif}} {{endif}} {{if $movie->prefix()}} <span>{template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"}</span> {{endif}} <span class='ipsType_break ipsContained'> <a href='{$movie->url()}' class='' title='{{if $movie->mapped('title')}}{$movie->mapped('title')}{{else}}{lang="content_deleted"}{{endif}} {{if $movie->canEdit()}}{lang="click_hold_edit"}{{endif}}' {{if $movie->canEdit()}} data-role="editableTitle"{{endif}} {{if $movie->tableHoverUrl and $movie->canView()}} data-ipsHover data-ipsHover-target='{$movie->url()->setQueryString('preview', 1)}' data-ipsHover-timeout='1.5'{{endif}}> <span> {{if $movie->mapped('title') or $movie->mapped('title') == 0}}{$movie->mapped('title')}{{else}}<em class="ipsType_light">{lang="content_deleted"}</em>{{endif}} </span> </a> </span> </h3> <p class='ipsType_light'>{lang="byline_nodate" htmlsprintf="$movie->author()->link()"}</p> <div class='ipsType_richText ipsType_normal ipsSpacer_both' data-ipsTruncate data-ipsTruncate-type="remove" data-ipsTruncate-size="2 lines"> {$movie->truncated(TRUE)|raw} </div> <p class='ipsType_reset ipsType_light ipsType_blendLinks'> {{if \IPS\Request::i()->app != 'movies'}} {lang="in"} <a href="{$movie->container()->url()}">{$movie->container()->_title}</a> {{endif}} </p> {{if \count( $movie->tags() )}} <div class=" ipsSpacer_top"> {template="tags" group="global" app="core" params="$movie->tags()"} </div> {{endif}} <p class='ipsType_reset'> <ul class="ipsList_inline"> {{if $movie->runtime}} {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <li class='ipsType_light ipsType_blendLinks'>{lang="movie_running_{$movie->type}"}: {$runtime}</li> {{endif}} {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <li class='ipsType_light ipsType_blendLinks'>{$genres}</li> </ul> </p> </div> <div class='ipsDataItem_generic ipsDataItem_size8'> {{if $movie->container()->allowcomments}} <p class='ipsType_normal {{if !$movie->comments}}ipsType_light{{endif}}'> {{if $movie->comments}} <a href='{$movie->url()->setQueryString( 'tab', 'comments' )->setFragment('replies')}'> {{endif}} <i class='fa fa-comment'></i> {lang="num_comments" pluralize="$movie->comments"} {{if $movie->comments}} </a> {{endif}} </p> {{endif}} {{if $movie->container()->allowreviews}} {{if $movie->reviews}} <a href='{$movie->url()->setQueryString( 'tab', 'reviews' )->setFragment('reviews')}'> {{endif}} {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; <span class='ipsType_normal ipsType_light'>({lang="num_reviews" pluralize="$movie->reviews"})</span> {{if $movie->reviews}} </a> {{endif}} {{endif}} <p class='ipsType_medium'><strong>{{if $movie->updated == $movie->submitted}}{lang="submitted"} {datetime="$movie->submitted"}{{else}}{lang="updated"} {datetime="$movie->updated"}{{endif}}</strong></p> </div> {{if method_exists( $table, 'canModerate' ) AND $table->canModerate()}} <div class='ipsDataItem_modCheck'> <span class='ipsCustomInput'> <input type='checkbox' data-role='moderation' name="moderate[{$movie->id}]" data-actions="{expression="implode( ' ', $table->multimodActions( $movie ) )"}" data-state='{{if $movie->tableStates()}}{$movie->tableStates()}{{endif}}'> <span></span> </span> </div> {{endif}} </li> {{endforeach}} {{endif}} <li class='ipsAreaBackground_reset ipsType_blendLinks ipsClearfix sosMovieIndexBlock sosMovieIndexBlockItem ipsPad_half ipsCarousel_item' data-ipsLazyLoad> <div class="indexBlock"> <div class='ipsPos_center'> <div class="sosMovieCover"> <!-- JWSE Rating Circle --> {{$fields = $movie->customFields();}} {{if $fields['field_5']}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock orange" > <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{elseif $fields['field_5'] == 0}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} <a href='{$movie->url()}' title='{lang="view_this_movie" sprintf="$movie->title"}'> <div class=""> {{if $movie->cover_thumb}} {template="bgCover" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'big'"} {{else}} <a title='{lang="view_this" sprintf="$movie->title"}' href="{$movie->url()}"> <img class="bgMovieCover" src='{resource="movie.PNG" app="movies" location="front"}'> </a> {{endif}} </div> </a> <div class="jwse_MoviePhoto_Footer jwse_MoviePhoto_Footer-indexBlock"> {template="rating" group="global" location="front" app="core" params="'large', $movie->averageReviewRating(), \IPS\Settings::i()->reviews_rating_out_of, $movie->memberReviewRating()"}&nbsp;&nbsp; </div> </div> </div> </div> </li> <li class='ipsCarousel_item ipsAreaBackground_reset ipsPad' data-ipsLazyLoad> <div class='ipsColumns ipsColumns_collapsePhone'> <div class='ipsColumn ipsColumn_medium ipsType_center'> <!-- JWSE Rating Circle --> {{$fields = $movie->customFields();}} {{if $fields['field_5']|raw}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock jwse_ratingCircle-Featured"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock circular-chart-Featured orange" > <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="{{$fields = $movie->customFields();}}{$fields['field_5']|raw}, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="17" y="22.35" class="percentage">{{$fields = $movie->customFields();}}{$fields['field_5']|raw}</text> <text x="27" y="15.35" class="percentageSmall">%</text> </svg> </div> {{else}} <div class="jwse_ratingCircle jwse_ratingCircle-indexBlock jwse_ratingCircle-Featured"> <svg viewBox="0 0 36 36" class="circular-chart circular-chart-indexBlock circular-chart-Featured"> <path class="circle-bg" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <path class="circle" stroke-dasharray="0, 100" d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831 a 15.9155 15.9155 0 0 1 0 -31.831" /> <text x="18" y="19.35" class="percentage unrated">Unrated</text> </svg> </div> {{endif}} {template="coverPhoto" group="global" app="movies" params="$movie->cover_thumb, $movie->url(), $movie->title, 'large'"} </div> <div class='ipsColumn ipsColumn_fluid'> <h1 class='ipsType_pageTitle ipsContained_container'> {{if $movie->mapped('locked')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="movies_locked"}'><i class='fa fa-lock'></i></span></span> {{endif}} {{if $movie->hidden() === 1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="pending_approval"}'><i class='fa fa-warning'></i></span></span> {{elseif $movie->hidden() === -1}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->hiddenBlurb()}'><i class='fa fa-eye-slash'></i></span></span> {{elseif $movie->hidden() === -2}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{$movie->deletedBlurb()}'><i class='fa fa-trash'></i></span></span> {{endif}} {{if $movie->canToggleItemModeration() and $movie->itemModerationEnabled()}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_warning" data-ipsTooltip title='{lang="topic_moderation_enabled"}'><i class='fa fa-user-times'></i></span></span> {{endif}} {{if $movie->mapped('pinned')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="pinned"}'><i class='fa fa-thumb-tack'></i></span></span> {{endif}} {{if $movie->mapped('featured')}} <span><span class="ipsBadge ipsBadge_icon ipsBadge_positive" data-ipsTooltip title='{lang="featured"}'><i class='fa fa-star'></i></span></span> {{endif}} {{if $movie->canEdit()}} <span class='ipsType_break ipsContained' data-controller="core.front.core.moderation"> {{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<span data-role="editableTitle" title='{lang="click_hold_edit"}'><a href='{$movie->url()}'>{$movie->title}</a></span> </span> {{else}} <span class='ipsType_break ipsContained'>{{if $movie->locked()}}<i class='fa fa-lock'></i> {{endif}}<a href='{$movie->url()}'>{$movie->title}</a></span> {{endif}} {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="jwse_movieYear">( {$date->format('Y')} )</span> {{endif}} {{if $fields['field_4']}} <span class="jwse_movieYear">( {{$fields = $movie->customFields();}}{$fields['field_4']} )</span> {{endif}} {{if $movie->prefix() OR ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}} <span {{if !$movie->prefix()}}class='ipsHide'{{endif}} {{if ( $movie->canEdit() AND $movie::canTag( NULL, $movie->container() ) AND $movie::canPrefix( NULL, $movie->container() ) )}}data-editablePrefix{{endif}}> {template="prefix" group="global" app="core" params="$movie->prefix( TRUE ), $movie->prefix()"} </span> {{endif}} </h1> <div class="jswe_movieMeta"> {{$fields = $movie->customFields();}} {{if $fields['field_6']}} <span class="ipsDataItem_generic certification">{{$fields = $movie->customFields();}}{$fields['field_6']|raw}</span> {{endif}} <!-- Movie Release Date --> {{if $movie->status == 'Released'}} {{$date = \IPS\DateTime::ts( strtotime( $movie->release_date ) );}} <span class="ipsDataItem_generic">{datetime="$date" dateonly="true"}</span> {{endif}} <!-- Movie Genres --> {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <span class="ipsDataItem_generic">{$genres}</span> <!-- Movie Runtime --> {{if $movie->runtime}} {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <span class="ipsDataItem_generic">{$runtime}</span> {{endif}} </div> <div class='ipsType_richText ipsType_normal ipsSpacer_both' data-ipsTruncate data-ipsTruncate-type="remove" data-ipsTruncate-size="2 lines"> {$movie->truncated(TRUE)|raw} </div> <p class='ipsType_reset'> <ul class="ipsList_inline"> {{$runtime = \IPS\movies\Movie::getRuntime( $movie->runtime );}} <li class='ipsType_light ipsType_blendLinks'>{lang="movie_running_{$movie->type}"}: {$runtime} </li> {{$genres = \IPS\movies\Movie::getGenreName( explode( ',', $movie->genres ) );}} <li class='ipsType_light ipsType_blendLinks'>{$genres} </li> </ul> </p> <ul class='ipsToolList ipsToolList_horizontal ipsSpacer_top'> <li class='ipsPos_left'> <a href='{$movie->url()}' class='ipsButton ipsButton_light ipsButton_fullWidth ipsButton_small' title='{lang="view_this_movie" sprintf="$movie->title"}'>{lang="more_information"} <i class="far fa-play-circle"></i></a> </li> </ul> </div> </div> </li> /*** Custom Styles ***/ .jwse_note{ color: #294459 } .ipsBadge_positive{ --badge--background: var(--color-palegrey); --badge--color: var(--color-jwsecoral); } /*** Youtube Popup ***/ .JWSE_video-container { overflow: hidden; position: relative; width:100%; } .JWSE_video-container::after { padding-top: 56.25%; display: block; content: ''; } .JWSE_video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .JWSE_play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align:center; height:170px; width:170px; background: rgb(41,68,89, 0.5); display:block; border-radius:100% } .JWSE_playBtn{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size:70px; opacity:0.9; color:white; display:block; } .JWSE_playTxt{ position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); font-size:16px; color:white; display:block; } /*** My Rating Circle ***/ .jwse_MyReviewText{ position:relative; } .jwse_ratingCircle { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:100px; } .jwse_ratingCircle-indexBlock { float: right; position: absolute; top: 0px; right: 0px; z-index:999; width:50px; } .jwse_ratingCircle-categoryList { float: left; position: absolute; top: -5px; left: 112px; z-index:999; width:50px; } .circular-chart{ display: block; margin: 10px auto; max-width: 80%; max-height: 100px; background-color: var(--color-baseblue); border-radius: 50%; } .circular-chart-indexBlock{ max-width:100%; max-height:50px; top:-6px; right: 3px; position:relative; } .circular-chart-Featured{ max-height:50px; top:-5px; right: 17px; position:relative; } .circular-chart_unrated{ background-color: var(--color-palegrey); } .circle-bg { fill: none; stroke: #eee; stroke-width: 3.8; opacity: 0.3; } .circle { fill: none; stroke-width: 3.8; stroke-linecap: round; animation: progress 1s ease-out forwards; } @keyframes progress { 0% { stroke-dasharray: 0 100; } } .circular-chart.orange .circle { stroke: var(--color-jwsecoral); } .percentage { fill: white; font-family: Montserrat; font-size: 13px; text-anchor: middle; } .percentageSmall{ fill: white; font-family: Montserrat; font-size: 5px; text-anchor: middle; } .unrated{ font-size:5px; } /*** View CSS ***/ .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; margin-top:-15px; min-height:800px; background-image:url(https:{media="528"}); background-color: #294459; background-position:top center; background-repeat:no-repeat; background-size:cover; } .ipsPageHeader.ipsClearfix.ipsSpacer_bottom { margin-top: -200px; } .ipsColumn_veryWide { width: 300px; } .ipsBox.ipsResponsive_pull { background-color: rgba(255, 255, 255, 0.6); } .whiteBack { font-size: 18px; background-color: white; border-radius:7px; } .ipsCarousel_inner { height: 230px !important; } .sosMovieCover_large img { margin: 0px auto; width: 100%; width: -moz-available; width: -webkit-fill-available; width: stretch; max-width: 300px !important; max-height: auto; border-top-right-radius: 7px; border-top-left-radius: 7px; } .jwse_MoviePhoto_Footer{ background-color: var(--color-baseblue); text-align:center; padding:15px 0; border-bottom-right-radius:7px; border-bottom-left-radius:7px; color:white !important; } .jwse_MoviePhoto_Footer-indexBlock{ position:absolute; display:block; width:100%; bottom:0; z-index:999; padding: 3px 0; margin-bottom:-28px; } .jwse_MoviePhoto_Footer-indexBlock .ipsRating.ipsRating_large{ font-size:10px !important; } .ipsRating .ipsRating_mine .ipsRating_on .fa-star { color: var(--color-jwsecoral) !important; } .jwse_movieYear{ font-size:16px; } .ipsDataItem_generic{ display: table-cell; padding: 5px 15px 15px 0; vertical-align: center; } .ipsDataItem_generic.certification { border: 1px solid #666; padding: 0 5px; display: block; float: left; margin: 5px; } .jwse_movieSubtitle{ font-weight:600; font-style: italic; display:block; } .jwse_MyReviewFace{ background-image:url(https:{media="530"}); background-size:cover; width:100px; height:100px; float:left; display:block; } .jwse_MyReviewTextRating { float: right; margin: 45px; } .jwse_MyReviewText{ margin-left:130px; background-color: var(--color-baseblue); color: white; font-size: 16px; padding:10px 30px; position:relative; border-radius:7px; } .jwse_MyReviewText:after { content: ''; position: absolute; left: 0; top: 30px; width: 0; height: 0; border: 20px solid transparent; border-right-color: var(--color-baseblue); border-left: 0; margin-top: -20px; margin-left: -20px; opacity:0.4; } .jwse_movieDescription { margin-top: 20px; display: block; font-size: 16px; font-weight: bold; margin-bottom: -10px; } .jwseHeroContainer { position: relative; top: 0px !important; } .ipsCarousel .ipsCarousel_inner { height: 230px !important; } #elMoviesFeatured .ipsCarousel .ipsCarousel_inner { height: 322px !important; } #elMoviesFeatured .ipsCarousel_item{ background-color:#FFF2CC; } #elMoviesFeatured .ipsButton { background-color: var(--color-baseblue) !important; color: white; } I hope this will help get you started building your own Movie database. If you use this for your own website, please drop a link here, so we can see how it turned out. Also if you need help, just drop a comment here or in the forum and I will try my best to help you. Good luck and enjoy!
  6. Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects. Creating the Database I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else. Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add: Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself. Setting up a Database Relationship After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate. Adding the database relationship in the template As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects. Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code: {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank: {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this: <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}} Defining the output in basicRelationship Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file. This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end. With the ID defined we can add a bit of code to make sure we only target specific databases with our changes: {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}} Creating Theme Templates instead of just using basicRelationship In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook. In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly. Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead. Adding data to the theme template Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item: {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently: {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag: {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea. <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div> This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast. Happy coding! View full blog article
  7. Database relations in Pages is a very powerful way to bring content from different databases into entries of ther databases. In this example I will show you how I added the People in project area in My Projects. Creating the Database I started by creating a new database called "People Profiles". It will be a database just to hold the data as it will not be publicly presented anywhere outside of the My Projects area. just to make it easier to work with I created a page and added the database to it. I also made the page available only to me so I can use it, but it will not be visible to anyone else. Then I decided on the fields that I wanted to use. I want to use an image, so I activated the record image. Then I went through the data I wanted to add: Name Title Awesome URL Linkedin URL Instagram URL Twitter URL Homepage URL Working area These are the basic fields. I realized thad I will probably have multiple versions of the profiles depending on when in time I worked with them. To search for the correct profile I would need more information, so I also added a Long Title that i se as the title field. I also added a Notes field to act as the Content field in case I wanted to scribble something down for myself. Setting up a Database Relationship After I added a few profiles it was time to bring them from the People Profiles database into the My Projects database. The first step was to add a new field into the My Projects database of the type "Database Relationship". When creating that I have to choose what database I want to create the relationship to, so I selected People Profiles. In the settings for display options I set a template key so I can reference it later and I unchecked the show in listing template and show in display tempate. Adding the database relationship in the template As I have selected not to display anything in the listing or display templates nothing will happen yet. So new we have to add this to our template for My Projects so we can show the data where we want it. So we head over to Templates in Pages where I have created my own template set for My Projects. Adding custom fields are done by adding a code line. There are some variations on this, but I will not into it in this post. This is the code: {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} As you only want to show this field if it is actually not blank, then we wrap that in a condition to only show if it is not blank: {{if $record->customFieldDisplayByKey('your custom field key')}} {$record->customFieldDisplayByKey('your custom field key', 'display')|raw} {{endif}} In my case I also wanted to add some styling and a header. So my code looks like this: <!- People in Footer --> {{if $record->customFieldDisplayByKey('project_people')}} <div class="project_people_footer"> <h3>People in the Project</h3> <div class='ipsGrid ipsGrid_collapseTablet'> {$record->customFieldDisplayByKey('project_people', 'display')|raw} </div> </div> {{endif}} Defining the output in basicRelationship Now that we have included the data from the People Profiles database you will see that it is just a link. We want to have more data than that so now we must define what data we want to pull from that database and how we want that to be displayed. We have to do that be editing a theme file called basicRelationship. So we head over to our Theme folder and click the "Edit HTML and CSS" icon to get into the templates. Then under CMS->Global you will find the basicRelationship file. This file is a bit tricky because it defines all database relations. In order for us to target specifically the data coming from People Profiles we need to figure out what ID that database has. We can do that from Pages under Content->Databases which will list all database. If you hover over the edit button over your selected database, then you can see the URL at the bottom of your screen with the ID of the database at the very end. With the ID defined we can add a bit of code to make sure we only target specific databases with our changes: {{foreach $items as $id => $item}} {{if $item::$customDatabaseId == 19}} <!-- People database --> {template="BasicRelationship_PeopleProfiles" app="cms" group="basic_relationship_templates" params="$item"} {{elseif $item::$customDatabaseId == 16}} <!-- Author database --> {template="BasicRelationship_author" app="cms" group="basic_relationship_templates" params="$item"} {{else}} <!-- all other databases --> <a class="ipsPages_csv" href="{$item->url()}">{$item->_title}</a> {{endif}} {{endforeach}} Creating Theme Templates instead of just using basicRelationship In this code I have added 2 databases (19 and 16) and then I have a fallback for all others at the end that will show the default link. While it is very possible to add the code directly into this template I have used a different approach and instead created separate templates outside and then referenced them in the basicRelationship. This way I can work on the content for each database in a more focused way and the basicRelationship becomes a bit easier to overlook. In order to create a new template you go to Create New at the bottom of the template listings. Select HTML template and then fill out the form accordingly. Name - the name of the template. Variables - We add $items here since that is what is defined in the foreach loop in basicRelations. Location - Here we select front to place the template in the correct section. Group - I suggest you create your own group here so it is easier for you to find later. Application - Here we select Pages If you have done this as I have then you will have your new template located under CMS->Front->basic_relationship_templates. If you have selcted another group, then that is where you will find it instead. Adding data to the theme template Now that we have a template for our connection between the databases, then we can start adding the data to it that we want to show in My Projects. This is done in a very similar way as when we add the data to the entry templates. Instead of using $record however we use $item: {{if $item->customFieldDisplayByKey('your custom field key')}} {$item->customFieldDisplayByKey('your custom field key', 'raw')} {{endif}} As I added the default record image that is called a bit differently: {file="$item->_record_image_thumb" extension="cms_Records"} You can also reference the title field and the content field with a shorter tag: {$item->_title} {$item->_content|raw} In my current code I have nested the fields a bit and I have used the field for working area pretty sloppy, but I think you get the general idea. <div class='ipsGrid_span2 people-profiles_card'> <div class="people-profiles_image {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}_image"> <img class="ipsImage {{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}" src="{file="$item->_record_image_thumb" extension="cms_Records"}" class=" {{if $item->customFieldDisplayByKey('working-area')}} {$item->customFieldDisplayByKey('working-area', 'raw')} {{endif}} " /> </div> <div class="people-profiles_Name"> {{if $item->customFieldDisplayByKey('people-profiles_Name')}} {$item->customFieldDisplayByKey('people-profiles_Name', 'raw')} {{endif}} </div> <div class="people-profiles_Title"> {{if $item->customFieldDisplayByKey('people-profiles_Title')}} <span class="{{if $item->customFieldDisplayByKey('working-area')}}{$item->customFieldDisplayByKey('working-area', 'raw')}{{endif}}">{$item->customFieldDisplayByKey('people-profiles_Title', 'raw')}</span> {{endif}} </div> <div class="people-profiles_links"> {{if $item->customFieldDisplayByKey('people-profiles_Awesome')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Awesome', 'raw')}" class="people-profiles_Awesome"><i class="fas fa-id-card"></i></a> {{else}} <i class="fas fa-id-card"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Linkedin')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Linkedin', 'raw')}" class="people-profiles_Linkedin"><i class="fab fa-linkedin"></i></a> {{else}} <i class="fab fa-linkedin"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Instagram')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Instagram', 'raw')}" class="people-profiles_Instagram"><i class="fab fa-instagram-square"></i></a> {{else}} <i class="fab fa-instagram-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Twitter')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Twitter', 'raw')}" class="people-profiles_Twitter"><i class="fab fa-twitter-square"></i></a> {{else}} <i class="fab fa-twitter-square"></i> {{endif}} {{if $item->customFieldDisplayByKey('people-profiles_Homepage')}} <a href="{$item->customFieldDisplayByKey('people-profiles_Homepage', 'raw')}" class="people-profiles_Homepage"><i class="fas fa-home"></i></a> {{else}} <i class="fas fa-home"></i> {{endif}} </div> </div> This guide should help you to bring in the data from any database into another database with the styling of your choice. I know this is a pretty short and not very detailed guide, but I hope it was useful anyway. Please add questions and I will improve upon the guide where I am jumping a bit to fast. Happy coding!
  8. One of the things that I will do when the upgrade is on the way is to build new templates for Pages. As much as I like the Pages SuperGrid from OpenType I don't feel I need another plugin just for setting the template for Pages. It is time to build one on my own from scratch. At the moment I am looking over the alternatives because I will most likely build more than one layout. The block based is a favorite of course, but I will probably do a more traditional one as well with both a small and a big image. I already have a timeline version that I should just clean up and maybe enhance a bit. I am going to play around with CSS Grids I think to see how that works within Invision Community. I will not go for any customizations for this as I do not feel comfortable doing that yet. Maybe for year 3 if time permits. So this will be fun and I have a feeling I will learn a lot from this experience as there a bound to be thing I have not considered yet!
  9. Notion.so is a relatively new product, but it is already making some waves and is often mentioned in comparison with Atlassians products. At first glance it has a good spread of functionality and a price that can really challenge the Atlassian giant, especially for small to medium companies. "Write, plan, collaborate, and get organized. Notion is all you need — in one tool." Notion.so started in 2016 in San Fransisco and it has already attracted many users to its simple, yet powerful features. On their website they have 4 areas that they see as their core: Notes & docs, Knowledge base, Tasks & Projects and Database. If we compare these with the Atlassian suite it is pretty much Confluence with Trello baked into one product. The editing capabilities are not bad and Notion.so uses an inline editing function rather then the old click to edit function in Confluence. It is very nice and uses the "/" command to access the functions rather than a toolbar. The permissions system is a bit different, but seem pretty solid from what I can tell. Once you get the hang of things it is very, very easy to build content with Notion.so. The capabilities for Tasks & Projects are very similar to Trello so if you know how to work with Trello you should have no issues with Notion.so. If anything I feel that Notion.so actually have a more capable feature set than Trello by allowing a ton of fields that can be customized to create some pretty sophisticated setups. While not nearly as powerful as Jira for development purposes, this is is more than enough for many other situations. Databases follow pretty much the same capabilities as for tasks and pages. In fact tasks comes from a database by default. This means that you can create pretty awesome databases with multiple views, including tasks, lists and even a calendar view. Personally I love the feature that each row in my table can be edited as a separate page. At a very affordable price compared to Confluence and Jira with pretty solid features this is not a bad alternative. There are some concerns regarding security as Notion.so do not have any ISO, SOC 2, HIPAA certificates, but considering they have passed reviews from companies such as Slack and Intercom that is probably not a big thing for it's user base. I see Notion.so as a good alternative for small to medium non-development companies. It can work for smaller development companies as well as for large non-development companies, but I think the sweet spot is in the small to medium non-development area. The price also suggest that as it is user based and at the top tier with 20 dollars per user it is getting pretty expensive. I like Notion.so and I think it definitely have a place in some organizations. It is clearly being developed with passion where the goal is not to make money, but to make people's life easier and more organized. As always they get an extra gold star for giving students and educators this awesome product for free. Notion.so comes as an online cloud solution, a mobile app as well as downloads for mac and windows that even allow offline editing....and did I mention it has a dark mode that is simply amazing? If you have not tried it, then go and sign up for a free account today and give it a go. View full blog article
×
×
  • Create New...