Completely redesigning the front-end for the Drupal forum - javascript

I only have web development experience with CakePHP, and I've recently started a Drupal project. My main task is to re-skin the Drupal forums so instead of a normal comment chain, there is a timeline of icons connected by a tree structure that display a comment when you click on them.
This is a pretty radical overhaul, and while I'd feel confident about doing this in CakePHP, where I can just write HTML as I please, the structure of Drupal confuses me. I've located the theme file that themes individual comments, but I'm not sure how to rewrite the page as a whole. A forum topic appears to just be a node with comments, so I'm not completely sure how to re-theme the whole page.
To Summarize, I need to:
Determine if any given node is a forum topic and replace the normal body with a scrollable timeline
Display simple shapes representing posts taking place at a certain time on the timeline connected as a tree
Hide the normal comments until the corresponding icons are clicked.
Additionally, I need a way for the user to filter posts on the timeline by their tags, but once I figure out the Javascript for showing the posts, this shouldn't be terribly difficult.
Thanks for helping out a confused web dev.

Related

Sisense - How To Customize UI

I'm a total Sisense noob, but am being tasked with customizing the look and feel of the Sisense app. Out of the box, it looks similar to:
For starters, I need to customize the header and left nav (highlighted in the screenshot above). I've read some of the Sisense documentation and lots of forums and posts, but am having trouble getting a straight answer to how to customize the UI. How do I modify/override the existing HTML, CSS, and JavaScript for various elements on the page? (may be 3 separate questions)
(note: Answers can include "it's actually easier to embed dashboards and widgets into your existing application")
You need to have an add-on to your Sisense license to customize the sisense web app.
https://documentation.sisense.com/7-1/administration/embedded-analytics/rebranding-sisense/white-label.htm#gsc.tab=0

Personal library for html/css/js components

I have been working as a frontend developer for a couple of months now and have realized that alot of design components repeat itself between projects, an example is boxes. For almost every project I have done this far there has been boxes (productboxes, cta:s, staff etc.) and every time I spend an hour or two to build them from scratch. I could of course look through my old projects to se where I used a similar box before but looking through all the old repos for the best fit takes almost as long time as building from scratch. So my question is there is an application for storing snippets kind of like codepen / jsfiddle but with focus on sorting and tagging up the snippets. For example if I needed boxes I could go to boxes and all boxes I have added could be scrolled through on one page. I feel that both me and the designer could have use of this, especially in projects that have a tight schedule.
I have tried to Google it but I haven't been able the find the right keyword.
You may have a look at Fractal which is exactly what you need. With Fractal you can build your own HTML component library to re-use your components with a nice interface. It's worth to try it out.

How to create styled boxes on a webpage in where I can add graphs,gaugs,numbers?

I'm creating a 1 page dashboard that will run fullscreen on a monitor on which I want to display some graphs. I made the graphs already all I need now is a proper template for the page. I was thinking something like this
I really dig the look but I'm clueless on how to make something like this using presumably css/js. Especially the lines in the background and a titlebox.
First of all, you have to code all of the man div-containers including your graphs and data-visuals. For that, a css-framework could help you managing the different views for all devices (http://getbootstrap.com/).
Later on, you could add inner divs for the title box and the background. Also get yourself some inspiration. For example: this is the admin-theme I am using for my actual project: http://admindesigns.com/framework/dashboard.html
After digging into that, you may ask some deeper questions about styling your Dashboard, so it's easier for us to respond to an actual problem ;)
Cheers,
Chris

Is it possible to make a mobile site using jQuery inside the ordinary html webpage?

This is my first time asking questions here and I have just started learning jQuery mobile so if it is not quite relevant or if it is just really obvious I apologize in advance.
What I am trying to do is build a mobile site for an online catalog for lots of books.
The original website has a very sophisticated way of filtering and sorting the search results based on the user's input and preference so unless it's absolutely necessary, I would really like to keep the original functionality of the website.
I was thinking maybe I can create a "mask" that looks like a mobile site to cover the real content; and whatever the user requests, I will go "underneath" the mask, do the search and when the data is loaded in the original website, I will then present them in a more mobile-friendly way.
So here is my question:
Is it possible to somehow include/embed a mobile site in the original html?
If so, could you please give me a few hints (books, articles, tutorials, anything) as to how I can approach this?
If not, could you please tell me how I should make the mobile site without having to re-create all the nice functionality that original website already has?
Thank you so much! :)
You could do this but you shouldn't. Mobile websites are optimized for mobile users. Not only as layout but also in loading weight. The direction you are heading you end up with a regular side (probably big in load) and add an overlay (extra load) to rebuild the layout (CPU heavy). So it's not the right way. A better solution is to create a optimized layout for mobile users only.

Animated panels like on Stackexchange Sites page

I would like to add a page to my website with a layout with animated panels that auto-slide around based on which one is clicked, as in Stackexchange's Sites page:
https://stackexchange.com/sites
What language and what specific methodology did the designers of Stackexchange use for laying out that page, or more meaningfully, what language and methodology would you recommend I research, in order to learn to create something similar? Perhaps there is a tutorial somewhere for creating something similar to it?
From looking at the sources of that page (achieved by activating the developer console in Chrome and looking at the scripts panel.) I can see they are making use of the Isotope layout engine.
Isotope is a jQuery plugin written in JavaScript and the site linked above contains some solid documentation; however if you are new to JavaScript then they may be a little difficult to follow. A quick google brings up the following Isotope tutorial which may help you get started.

Categories

Resources