I'm creating a header for a site, which has several individual items. I'm using css grid and want to avoid using media query for changing the layout when contents don't fit. Having trouble getting the grid setup.
My html structure looks like this:
<header class="container">
<div id="brand">...</div>
<div id="hamburger-menu>...</div>
<nav id="nav1">...</nav>
<nav id="nav2">...</nav>
</header>
Below is my current css code:
#brand { grid-area: brand; }
#hamburger-icon { grid-area: hamburgerIcon; }
#nav1 { grid-area: nav1; }
#nav2 { grid-area: siteNav; }
.container {
display: grid;
grid-template-columns: 450px auto ;
grid-template-rows: auto;
grid-row-gap: 16px;
grid-template-areas:
"brand nav1"
"brand nav2";
}
The above CSS gives me a layout that looks like this:
| brand | nav1 |
| | ---- |
| | nav2 |
This is fine on a larger screen. In my case nav2 is expected to be much longer. So, in smaller screens (not mobile/tablet), the current layout overflows to the right side.
I'd like to have the nav1 and nav2 just flow "under" the brand, but only when necessary. For example, move nav2 to the second row when it doesn't fit anymore.
| brand | nav1 |
| ----- | ---- |
| nav2 |
I know I can probably set the media query and based on screen size change the grid-template-areas but I'm wondering if that's the only way.
This article is really good that shows media query is not necessary, but I'm having trouble applying it in my case.
https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/
Any suggestions?
Related
If I have a list of "simple" cards that is rendered using ng-repeat,
what would be the recommended way to do a transition to a detailed view of one of those cards?
Does such a transition imply that the same HTML / DOM element needs to stay on screen and its content needs to change?
Does such a transition imply that the collection upon which ng-repeat is based needs to change so that it only includes that single item that we are transitioning to or does the rendering of the rest of the items should use some version of ng-if="item.id=focused_item_id"?
It doesn't need to be the same DOM element, and arguably shouldn't be. Animating width or height will cause repaints/reflows and will greatly hinder performance.
You could use ng-animate (https://docs.angularjs.org/api/ngAnimate) with a single detail element that gets populated with the relevant details from whatever object was clicked.
Something like this:
HTML
<div class="item" ng-repeat="el in elems track by $index" ng-click="getDetails(el)">
<div>Summary</div>
</div>
<div class="details" ng-if="showDetails">
<div>Details for {{currentItem}}</div>
</div>
CSS
.details {
position: fixed;
width: 100%;
transition: all 1s ease-out;
}
.details.ng-enter,
.details.ng-leave-active {
opacity: 0;
transform: scale(0.8);
}
.details.ng-enter-active,
.details.ng-leave {
opacity: 1;
transform: scale(1);
}
So getDetails() would do something like set $scope.showDetails = true; and set $scope.currentItem = el; Then you could have a close button that resets those two scope variables and destroys the detail element.
Hope that helps!
I have done what you are describing using CSS transitions on the DOM element in question. I have a list of elements, and when you click on one, the backing object has an 'expand' property set to true, which makes extra content visible and adjusts the size.
HTML
<div ng-repeat="el in elems" ng-class="{expand: el.expand}" class="element">
<div ng-click="el.expand = !el.expand">Summary</div>
<div ng-if="el.expand">Details</div>
</div>
CSS
div.element {
transition: 0.5s linear all;
height: 200px;
}
div.element.expand {
height: 500px;
}
Try clicking on 'Summary 1' or 'Summary 2' in the plunkr
https://plnkr.co/cDkuNjTbE83L5bDJccsJ
The text editor is not loading, I don't know why. I have a coldfusion page and I have included it as follows (Please not I am working inside sessions)under
the section.
<cfoutput>
<script type="text/javascript" src="#rootUrl#/#myPath#/tests/user/tinymce_4.0.8/tinymce/js/tinymce/tinymce.min.js"></script>
</cfoutput>
Below this, I have defined styles for including CSS:
<cfoutput>
<style>
#import url('#rootUrl#/#myPath#/css/first.css');
#import url('#rootUrl#/#myPath#/css/second.css');
#import url('#rootUrl#/#myPath#/css/third.css');
</style>
</cfoutput>
And below this code, i have defined the code to initiate which can be found here (Under View Source):
http://www.tinymce.com/tryit/full.php
<script type="text/javascript">
tinymce.init({
selector: "textarea",
convert_urls: false,
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: 'Test template 1', content: 'Test 1'},
{title: 'Test template 2', content: 'Test 2'}
]
});
</script>
I am getting following error, could you tell me why is it like that?
NetworkError: 404 Not Found - http://abc.xyz.com/Public/tests/user/tinymce_4.0.8/tinymce/js/tinymce/tinymce.min.js
ReferenceError: tinymce is not defined
tinymce.init({
Please let me know what's wrong.
P.S: I have tested the editor and it works fine if I simply create a simple HTML page or even cfm page and do the above mentioned stuff(Excluding rootURL defining steps)
try put "http://abc.xyz.com/Public/tests/user/tinymce_4.0.8/tinymce/js/tinymce/tinymce.min.js"(change abc.xyz.com with the actual domain) in your address bar and see if the scripts is printed in your browser
Foundation default tooltips look like this:
I'd like to get rid of the small top triangle on parts of my website.
To get rid of it everywhere you just have to change the $tooltip-pip-size variable value to 0 from the foundation_and_overrides.scss file (also called _settings.scss if you're not using the foundation gem with rails).
Is it possible to define a custom version of the foundation tooltip without a pip?
EDIT
The difficulty here is that when I write something like
<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span>
Foundation javascript generates a specific element at the end of the document containing the actual tooltip:
<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span>
You see that the tip-bottom class I added to the first span got copied to the second but that is only the case for foundation specific classes like tip-left, tip-right and so on.
What I would like to do is being able to add a "no-pip" class to the first span (the only one I actually write) and be able to alter the look of the generated span containing a "nub" element.
<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span>
Just hide it by setting display property to none
.tooltip > .nub {
display: none;
}
that little triangle is just span with class nub all what you need to do is to remove the css border from it then you 'll have your tool tip in the same location as normal without the little triangle
With foundation version 5 you can customize the tooltip template.
Just remove the <span class="nub"></span>:
$(document).foundation({
tooltip: {
tip_template : function (selector, content) {
return '<span data-selector="' + selector + '" class="'
+ Foundation.libs.tooltip.settings.tooltip_class.substring(1)
+ '">' + content + '<span class="nub"></span></span>';
}
}
});
I'm trying to learn ember and to understand all concepts. I'm stucked now for a couple of days.
I tried to create a view with multiple "subviews" (is there a name for it in ember?). For example:
+-----------------------------------------------+------------------+
| Post title | new tag: ______ |
+-----------------------------------------------+ |
| Post text | * tag 1 |
| | * tag 2 |
| | |
+-----------------------------------------------+------------------+
| New comment: _____________ submit | related posts |
| | |
| * comment 1 text | * post 1 |
| * comment 2 text | * post 2 |
| * comment 3 text | |
| * comment 4 text | |
| * comment 5 text | |
| | |
+-----------------------------------------------+------------------+
My idea is to have a PostController with its own route to show details for a selected post. Adding nested elements for comments and widgets (with {{#each}}) is easy. This means I need to handle all actions and everything else for my nested elements in my PostController which smells bad and becomes messy.
Shouldn't be each of them (comments, tags and related) a separate controller? In this case I could keep my PostController clean and handle all nested action in its own controller. Is this the right way or has ember better ways to do it?
If yes, how can I implement these nested views. I read many topics around nested views in ember but I can't figure out its concepts. I would say, I don't need routes for tags and comments because its bound to a PostController and they are never used without a post, but I'm not sure.
After reading this post, I tried to use render but I don't understand the concept which controller and view is used in this case.
Is there maybe a good (updated) guide which I just missed or could someone please explain me how this could work or guide me in the right direction?
You can create separated views by Em.View.create,
then insert to post template with {{view}} for comments & tags.
Templates:
<script type='text/x-handlebars' data-template-name='post'>
<div class='post'>
<h1>{{title}}</h1>
<div class='content'>{{{content}}}</div>
<div class='tags'>{{view App.TagView}}</div>
<div class='comments'>{{view App.CommentView}}</div>
<div class='relatedPosts'>{{view App.RelatedPostView}}</div>
</div>
</script>
<script type='text/x-handlebars' data-template-name='comment'>
{{#each view.comments}}
<!--some HTML codes for comments-->
{{/each}}
</script>
Script:
App.CommentView = Em.View.create({
templateName:'comment',
comments:[],
didInsertElement: function(){
// Handler related to this view has to implement here
// as there are delays for inserting elements
}
});
App.PostController = Em.ArrayController.extend({
getContent: function(){
//some codes for loading content
//You can implement all methods in single controller
this.addComments(data.comments);
//Or call other methods after loaded the content
App.commentController.setup(data.comments);
},
addComments: function(data){
App.CommentView.set('comments',data);
}
});
I want the image to be centered next to the text.The amount of text will be different in each box so I can't set the height.As I research people mainly use two ways of vertical centering.Using line-height which I can't use, because I don't have fixed height.Second one is using absolute positioning which I can't use, because left div with image inside will cover the text.If I set padding to text, when image is not there it won't look good.
The best I could think of is to use jQuery to get and set the container height, and then set the margin according to the height.
<div class="container">
<div class="image_holder">
<img src="http://blog.oxforddictionaries.com/wpcms/wp-content/uploads/cat-160x160.jpg" alt="cat" />
</div>
<p>text</p>
</div>
<style type="text/css">
.container {
width:600px;
overflow:hidden; }
.image_holder {
width:100px;
height:100%;
float:left;
background:#eaf0ff; }
p {
width:500px;
float:left; }
</style>
<script>
$('.container').css('height', $('.container').height() );
$('.image_holder').css('margin-top', ( $('.container').height() - $('.image_holder img').height() ) / 2 );
</script>
Is there a way to do it cleanly with pure CSS ?
The best solution I came up with is to absolutely position the picture inside the box and then use javascript to remove padding if there is no image in the box.